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

Question

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

这里是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>

这是 table 脚本,

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 Datatables 1.10.18。如果我评论 scrollX、scrollY 和 scrollCollapse 属性和运行，现在水平和垂直滚动出现在浏览器级别并且没有任何滞后或无响应。

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

关于我哪里出错的任何想法？

Answer 1

经过大量研究和谷歌搜索后，我发现在数据表初始化中添加 paging: false 可以解决问题。希望这对某些人有所帮助。 :)

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

Jquery DataTables with both horizontal and vertical scroll makes browser unresponsive for just 50 records

datatables

horizontal-scrolling

vertical-scrolling