Magic Tables

Magic Tables is a Django app to turn QuerySets into any kind of table.

Quick start

• 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" %}
  
  [...]
  

Use it with Datatable

• 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" %}