Question

嗨，我想展示一个加载轮，向用户显示数据正在加载，请坐着等待。为此，我必须使用serverSide: True，然后发现它破坏了表的功能。

该表将不再仅在每页显示10个条目，而是显示所有条目，底部的数字告诉您有多少个条目将仅显示0。加载数据后所有这些都会发生。

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

下面是显示总数为0的示例：

示例

这应该是这样的：

正确的例子

当我移除serverSide: True时，它们又可以正常工作，但没有显示加载轮。

Answer 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”需要类型转换为整数。

JS DataTables ServerSide True打破了DataTable的功能

1 个答案: