Magic Tables is a Django app to turn QuerySets into any kind of table.
Install package
$ pip install django-magic-tables
Add "magic_tables" to your INSTALLED_APPS setting like this:
INSTALLED_APPS = [ ... 'magic_tables', ]
Load "magic_tables_tags" at the top of the page where you want to use them like this:
{% load magic_tables_tags %} [...]
Create a magic table:
[...] {% table object_list "optional classes separated by spaces" %} [...]
Include CSS
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.bootstrap4.min.css">
Include JS
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.4/js/responsive.bootstrap4.min.js"></script> <script> $(document).ready( function () { $('.data-table').DataTable( { 'language': { 'lengthMenu': '_MENU_ Results for page', 'zeroRecords': 'No results', 'info': 'Page _PAGE_ of _PAGES_', 'infoEmpty': 'No results', 'infoFiltered': '(Filtered on _MAX_ total results)', 'search': 'Search: ', 'paginate': { 'first': 'First', 'last': 'Last', 'next': 'Next', 'previous': 'Previous' } }, 'initComplete': () => { $('.data-table').fadeIn(); $('.graph').fadeIn(); } } ); } ); </script>
Pass "data-table" as second parameter to the table tag like this:
{% table object_list "data-table" %}