[Django]-Django: Using DataTables

by

0👍

I did this on a project I worked on a while back. Here’s how I defined the table in my template:

$(document).ready( function () {
            var ticketTable = $('#ticket-table').dataTable( {
                "fnDrawCallback": function() {
                    // Initialize popovers anytime new data is loaded into the table
                    $('a[rel=tooltip]').tooltip({
                        placement: 'left'
                    });
                },
                "bServerSide": true,
                "bAutoWidth": false,
                "sPaginationType": "bootstrap",
                "sAjaxSource": "{% url get_tickets_list %}",
                "aaSorting": [[ 2, "desc" ]],
                "iPageLength": 25,
                "bLengthChange": false,
                "bStateSave": true,
                "bFilter": true,
                "sDom": "<'length-change'><'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'length-change'><'span6'p>>",
                "oLanguage": {
                    "sSearch": ""
                },
                "aoColumns": [
                    { "bSortable": false, "sWidth": "14px", "bSearchable": false },
                    { "sWidth": "160px", "bSearchable": true },
                    { "sWidth": "60px", "bSearchable": true },
                    { "bSearchable": true },
                    { "bSortable": false, "sWidth": "14px", "bSearchable": false },
                    { "sWidth": "50px", "sClass": "center", "bSearchable": false },
                    { "bSearchable": true },
                    { "sWidth": "70px", "sClass": "center", "bSearchable": false },
                    { "sWidth": "75px", "bSearchable": true }
                ] } ).fnSetFilteringDelay(500);

Key is this line in the table options which defines the source URL for the AJAX request from the DataTable:

"sAjaxSource": "{% url get_tickets_list %}",

Then, you’ll also need a view to return the AJAX requests:

def get_tickets_list(request, queryset=Ticket.objects.all()):
    """
    AJAX calls for DataTable ticket list.
    """

    #columnIndexNameMap is required for correct sorting behavior
    columnIndexNameMap = { 0: 'link', 1 : 'created', 2: 'priority', 3: 'client', 4: 'client_email', 5: 'sites', 6: 'problem',7: 'updates', 8: 'state' }
    #path to template used to generate json (optional)
    jsonTemplatePath = 'json_tickets.txt'

    #call to generic function from utils
    return get_datatables_records(request, queryset, columnIndexNameMap, jsonTemplatePath)

As I said, this was a while ago and may not work anymore with the latest versions of DataTable, but maybe it will set you in the right direction.

👤raddevon

Leave a comment