A minimal example

A minimal example using AjaxDatatableView.

How it works

An AjaxDatatableView-derived view describes the desired table content and behaviour as follows:

from ajax_datatable.views import AjaxDatatableView
from django.contrib.auth.models import Permission

class PermissionAjaxDatatableView(AjaxDatatableView):

    model = Permission
    title = 'Permissions'
    initial_order = [["app_label", "asc"], ]
    length_menu = [[10, 20, 50, 100, -1], [10, 20, 50, 100, 'all']]
    search_values_separator = '+'

    column_defs = [
         AjaxDatatableView.render_row_tools_column_def(),
        {'name': 'id', 'visible': False, },
        {'name': 'codename', 'visible': True, },
        {'name': 'name', 'visible': True, },
        {'name': 'app_label', 'foreign_field': 'content_type__app_label', 'visible': True, },
        {'name': 'model', 'foreign_field': 'content_type__model', 'visible': True, },
    ]
    

and is referenced in the template like so:

<div class="table-responsive">
    <table id="datatable" width="100%" class="table table-striped table-bordered dt-responsive compact nowrap">
    </table>
</div>

<script language="javascript">

    $( document ).ready(function() {
        AjaxDatatableViewUtils.initialize_table(
            $('#datatable'),
            "/ajax_datatable/permissions/",
            {
                // extra_options (example)
                processing: false,
                autoWidth: false,
                full_row_select: true,
                scrollX: false
            }, {
                // extra_data
                // ...
            },
            );
    });

</script>
    

where "/ajax_datatable_permissions/" is the endpoint to the previous view:

urlpatterns = [
    ...
    path('ajax_datatable/permissions/', ajax_datatable_views.PermissionAjaxDatatableView.as_view(), name="ajax_datatable_permissions"),
    ...
]