JQuery DataTables с горизонтальной и вертикальной прокруткой делает браузер не отвечает только на 50 записей - PullRequest
Новая
       40

JQuery DataTables с горизонтальной и вертикальной прокруткой делает браузер не отвечает только на 50 записей

0 голосов
/ 25 марта 2019

Я большой поклонник 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);
            }
});

Iиспользую Jquery Datatables 1.10.18.Если я прокомментирую свойства scrollX, scrollY и scrollCollapse и запустлю их, то теперь на уровне браузера появится горизонтальная и вертикальная прокрутка, и никаких задержек или откликов не будет.

Я проследовал за их документами и обнаружил, что https://datatables.net/examples/basic_init/scroll_xy.html

Есть идеи, где я ошибаюсь?

1 Ответ

0 голосов
/ 15 мая 2019

После долгих исследований и поиска в Google я обнаружил, что добавление paging: false в инициализации DataTable решило проблему. Надеюсь, это кому-нибудь поможет. :)

...