JS DataTables ServerSide 真正打破了 DataTable 的功能答案

【问题标题】：JS DataTables ServerSide True Breaks DataTable FunctionalityJS DataTables ServerSide 真正打破了 DataTable 的功能
【发布时间】：2019-02-02 23:31:08
【问题描述】：

您好，我想展示一个加载轮，它向用户显示数据正在加载并坐好等待。为了做到这一点，我必须使用serverSide: True 然后我发现这破坏了表格的功能。

该表格将不再每页仅显示 10 个条目，它将显示所有条目，底部的数字告诉您有多少条目将仅显示 0。一旦加载数据，这一切都会发生。

这是数据表的代码：

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';
                    }
                }
            }
        ]
    });

下面是底部显示 0 的总数示例：

示例

它应该是这样的：

正确的例子

当我删除 serverSide: True 时，一切都恢复正常，但加载轮不显示。

【问题讨论】：

标签： javascript php datatable

【解决方案1】：

请在 Ajax 调用中这样尝试

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

在服务器端，

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

}

注意：以上是 MVC.Net 服务器端示例，需要将“draw”类型强制转换为整数。

【讨论】：