Server-side processing not working with Django back-end

takingupspace

Here's my front-end code for initializing my DataTable:

$(document).ready(function() {
    var currPageStartOfFunction = 0
    var table = $('#my-table').DataTable( {
        ajax: {
            serverSide: true,
            processing: true,
            paging: true,
            url: 'url_to_api',
        },
        columns: [
            {data:"column1"},
            {data:"column2"},
            {data:"column3"},
            {data:"column4"},
            {data:"column5"},
        ],
        search: {
            regex: true,
            caseInsensitive: true,
        },
        columnDefs: [{
            targets: 1, // Date (not scan_date)
            // data is date, type can be rendering types, we want sort, and row returns the entire data for the row
            render: function(data, type, row) { // render called when DataTables needs to display data in the column
                if (type === 'sort') {
                    // sort the data as a Date object
                    return new Date(data);
                }
                // format the data for display
                return moment(data).format('MM/DD/YYYY');
            },
            // specify a custom search function for the Date field
            search: function (data, searchData, dataIndex, rowData) {// search called when DT needs to search column for a particular value
                var date = moment(data); // Date from target
                var searchDate = moment(searchData); // search term
                if (date.isValid() && searchDate.isValid()) {
                    var diff = searchDate.diff(date);
                    return -diff
                }
                return false;
            }
        }],
        //order: [[1, 'desc']], // sort table by column 1 which is date, in desc
        drawCallback: function(){
            var currentPageInCallback = this.api().page();
            if(currentPageInCallback > 0){
                currPageStartOfFunction++
            }
            console.log('currPageInCallback = ' + currentPageInCallback)
            console.log('currPageStartOfFunction = ' + currPageStartOfFunction)
            // make an AJAX request to update data and redraw table
            var table = $("#my-table")
            $.ajax({
                url: 'url_to_api',
                data: { page: currentPageInCallback },
                success: function(response) {
                    console.log(response)
                    my_table = $('#my-table').DataTable()
                },
                error: function() {
                    console.log('Error updating data');
                }
            });
        }
    })
});

Here are the imports I'm using:

I have processing and serverSide set to true per the documentation, but when my AJAX request kicks off, there isn't a request body (via Network within the browser's Dev Tools), and I've tried logging the request body on my Django server and it is empty.

What am I doing wrong here?

Thanks for your time.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You have serverSide, processing and -optiin paging inside the ajax option. Move them outside the ajax option like this:

        ajax: {
            url: 'url_to_api',
        },
        serverSide: true,
        processing: true,
        paging: true,

You don't need the paging option as the default is true.

Additionally, if you want to use server side processing then your server script will need to support the SSP Protocol. If not then you can find third party Django apps that support Datatables server side processing. A better option is to not use server side processing unless you have too many rows that cause performance issues.

Kevin

takingupspace

Thank you for your quick response. I can't believe I overlooked that.