Javascript JS DataTables服务器端True中断了DataTable功能

嗨，我想展示一个加载轮，它向用户显示数据正在加载，并静坐等待。为了做到这一点，我必须使用

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

var visitorTable=$（'#visitorTable'）.on（'error.dt'，flashToasts）.数据表({
服务器端：是的，
订单：[[3，“说明”]，
处理：对，
语言：{
正在处理：“正在加载…”
},
是的，
阿贾克斯：{
url:site.uri.public+'/api/list/visitors\u basic\u details/'+start+'/'+end，
dataSrc：函数（json）{
$（'#list_title'）.html（json.length+“所选日期范围的访问者”）；
identies=json；
返回json；
}
},
栏目：[
{数据：'avatar_url'，
“可订购”：错误，
呈现：函数（数据、类型、完整、元）{
如果（数据！=''）{
图像=''；
}否则{
if（full.gender==1）
图像=''；
else if（full.gender==0）
图像=''；
其他的
图像=''；
}
返回图像；
}
},
{数据：'名字'，
呈现：函数（数据、类型、完整、元）{
if（full.gender！=null）{
if（full.gender==0）{
性别=‘男性’；
}否则{
性别=‘女性’；
}
}否则{
性别=''；
}
if（full.birth_date！=null）{
age=Math.round（（（new Date（））.getTime（）/1000-full.birth_Date）/（60*60*24*365））；
}否则{
年龄=''；
}
返回“”+数据+“”+完整。姓氏+“”+”
“+性别+“”+年龄；
//return（新日期（））.getTime（）；
}
},
{数据：'电子邮件地址'}，
{数据：'最后一次看到'，
呈现：函数（数据、类型、完整、元）{
如果（数据！=null）{
last_seen=moment.unix（data.format（“DD/MM/YYYY HH:MM”）；
}否则{
最后一次见面=“”；
}
//隐藏时间戳，以便能够对列进行正确排序
最后一次见到你；
}
},
{数据：'提供程序'，
呈现：函数（数据、类型、完整、元）{
如果（数据=“”）{
申报‘登记表’；
}否则{
返回首字母（数据）；
}
}
},
{数据：'营销许可'，
呈现：函数（数据、类型、完整、元）{
如果（数据==1）{
返回“是”；
}否则{
返回“否”；
}
}
}
]
});

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

范例

这就是它应该是什么样子：

正确的例子

---

当我删除

serverSide:True

时，它会再次工作，但不会显示加载轮。

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