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

Question

I'm a great fan of JQuery DataTables and I have used this for very long time. Its the best and working fine. But now with my requirement of enabling both horizontal and vertical scroll, the table makes browser unresponsive for few seconds with just 50 records returned from server. I just have this table script and no other in my page.

Here is the 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>

Here is the table script,,

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

I'm using Jquery Datatables 1.10.18. If I comment the scrollX,scrollY and scrollCollapse properties and run, now horizontal and vertical scroll appears at browser level and there isn't any lag or unresponsiveness.

I followed their docs and found this, https://datatables.net/examples/basic_init/scroll_xy.html

Any ideas on where I'm going wrong?

Answer 1

After doing a lot research and googling I found that adding paging: false in the DataTable Initialization fixed the issue. Hope this helps some one. :)