django-magic-tables

===== Magic Tables

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

Detailed documentation is in the "docs" directory.

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