JS DataTables ServerSide True打破DataTable功能

Hi I wanted to show a loading wheel which displays to the user that the data is loading and to sit tight and wait. In order to do this I have to use serverSide: True I then found out that this broke the tables functionality.

The table would no longer only show 10 entries per page it would show all of them, the number at the bottom which tells you how many entries there are would just display 0. This would all happen once the data loaded.

Here is the code for the DataTable:

var visitorTable = $('#visitorTable').on('error.dt', flashToasts).DataTable({
        serverSide: true,
        order: [[ 3, "desc" ]],
        processing: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top: 100px"></i><span class="sr-only">Loading...</span> '
        },
        scrollX: true,
        ajax: {
            url: site.uri.public + '/api/list/visitors_basic_details/' + start + '/' + end,
            dataSrc: function(json) {
                $('#list_title').html(json.length + ' Visitors for the selected date range');
                identities = json;
                return json;
            }
        },
        columns: [
            {data: 'avatar_url',
                "orderable": false,
                render: function(data, type, full, meta) {
                    if(data != '') {
                        image = '<img src="' + data + '" alt="Profile Picture">';
                    } else {
                        if(full.gender == 1)
                            image = '<img src="' + site.uri.public + '/images/female-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                        else if(full.gender == 0)
                            image = '<img src="' + site.uri.public + '/images/male-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                        else
                            image = '<img src="' + site.uri.public + '/images/mixed-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                    }

                    return image;
                }
            },
            {data: 'first_name',
                render: function(data, type, full, meta) {
                    if (full.gender != null) {
                        if(full.gender == 0) {
                            gender = 'Male';
                        } else {
                            gender = 'Female';
                        }
                    } else {
                        gender = '';
                    }

                    if (full.birth_date != null) {
                        age = Math.round(((new Date()).getTime()/1000 - full.birth_date) / (60 * 60 * 24 * 365));
                    } else {
                        age = '';
                    }

                    return '<font color="#E15910">' + data + ' ' + full.last_name + '</font>' + '<br>' + gender + ' ' + age;
                    // return (new Date()).getTime();
                }
            },
            {data: 'email_address'},
            {data: 'last_seen',
                render: function(data, type, full, meta) {
                    if (data != null) {
                        last_seen = moment.unix(data).format("DD/MM/YYYY HH:mm");
                    } else {
                        last_seen = '';
                    }

                    // Hide the timestamp so you are able to sort the column correctly
                    return last_seen;
                }
            },
            {data: 'provider',
                render: function(data, type, full, meta) {
                    if (data == '') {
                        return 'Registration Form';
                    } else {
                        return capitalizeFirstLetter(data);
                    }
                }
            },
            {data: 'marketing_consent',
                render: function(data, type, full, meta) {
                    if (data == 1) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                }
            }
        ]
    });

Here is an example of the total number at the bottom displaying 0:

Example

This what it should look like:

Correct Example

When I remove serverSide: True it all works again but the loading wheel isn't displayed.

Please try like this inside the Ajax call

url: site.uri.public + '/api/list/visitors_basic_details?draw=1&start=' + start + '&length=' + end,

on the server side,

public JsonResult visitors_basic_details(string draw, int start, int length)
{

}

Note: Above is a MVC.Net server side sample and 'draw' needs to be type-casted to integer.