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

reeehman

Dear Allan,

I'm facing a weird issue with Jquery DataTables. These were once working perfectly in chrome, but now they are making the browser to become unresponsive.

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 Tried with Jquery Debugger and found no issues. But this problem occurs only in chrome browser. Two months earlier these were working fine in chrome but now making the browser to become unresponsive for few seconds.

This works perfectly in IE11 and Edge. I think, browser update by my organization has caused this issue. This issue occurs currently in Chrome Version 73.0.3683.75 (Official Build) (64-bit). I'm not sure in which previous version this was working fine.

Any suggestions or I'm wrong in my code part?

Here is my 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 my Script:

    var height = '300px',

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

Thanks,
Abdul

colin

Hi @reeehman ,

At a glance, everything looks ok. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

reeehman

Hi @colin,

Thanks for your time and reply. Please could you assist on how to mock an ajax server data in live.datatables.net? If I get an ajax data source with 50 rows and 40 columns I can mock this issue and prepare an test case.

Thanks,
Abdul

allan

You could use this as a starting point: http://live.datatables.net/tefehesi/1/edit . It doesn't have 40 columns of data, but you could use the same data points over and over in different columns if you need to make it up that large a table.

Allan

reeehman

Hi Allan,

This looks weird. Even I'm not able to reproduce this with my code now. Now its working fine. Sorry to bother you all and many thanks for your support. I appreciate the efforts. This can be closed now.

Thanks,
Abdul