具有水平和垂直滚动的 Jquery DataTables 使浏览器对仅 50 条记录无响应

Question

我是JQuery DataTables的忠实粉丝，我已经使用它很长时间了。它是最好的，工作正常。但是现在，由于我要求同时启用水平和垂直滚动，该表使浏览器在几秒钟内无响应，只有从服务器返回的 50 条记录。我只有这个表格脚本，我的页面中没有其他脚本。

这是 HTML，

<div class="page-content">
<section class="card">
<div class="card-body p-0">
<table id="table" class="table table-sm table-bordered mt-0 w-100">
<thead class="text-center"></thead>
</table>
</div>
</section>
</div>

这是表脚本，，

var height = dynamically calculated,
table = $('#table').DataTable({
serverSide: true,
autoWidth: true,
language: {
processing: "Loading...",
zeroRecords: "No matching records found"
},
processing: true,
deferRender: true,
scrollX: true,
scrollY: height,
scrollCollapse: true,
order: [],
dom: '<tr>',
ajax: {
type: "POST",
url: "server url",
contentType: "application/json; charset=utf-8",
headers: {
"XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
},
global: false,
async: true,
data: function (data) {
return JSON.stringify(data);
}
},
columns: [
{
title:"",
data: "",
render: function(){
},
name: ""
}
//... 19 more columns
],
drawCallback: function (settings) {
var count = table.data().count();
$('.data-table-disable').prop('disabled', !(count > 0));
$('#spanResultsCount').text(count);
$('section.card').height(height + 27);
}
});

我正在使用Jquery数据表1.10.18。如果我评论 scrollX、scrollY 和 scrollCollapse 属性并运行，现在水平和垂直滚动出现在浏览器级别，并且没有任何滞后或无响应。

我按照他们的文档找到了这个， https://datatables.net/examples/basic_init/scroll_xy.html

关于我哪里出错了有什么想法吗？

Answer 1

经过大量的研究和谷歌搜索，我发现在DataTable初始化中添加paging: false解决了这个问题。希望这对某人有所帮助。:)