jquery Обработка данных, приводящая к перезагрузке всей страницы

Question

У меня есть таблица данных jQuery, которая первоначально заполняется с помощью вызова ajax, и когда я щелкаю в любом месте таблицы, например, в виде номера нумерации страниц или раскрывающегося списка длины отображения, вся страница перезагружается до бесконечности .Вот как я заполняю таблицу данных.

let table = $('#data-table').DataTable();
function populateTable(){

   table = $('#data-table').DataTable({
            destroy: true,
            responsive: true,
            serverSide: false,
            autoWidth: false,
            paging: true,
            filter: true,
            searching: true,
            stateSave: true,
            scrollX: true,
            lengthMenu: [10, 25, 50, 75, 100],
            language: {
                "search": "Filtrer: "
            },
            ajax: {
                url: '/Observer/GetActiveClientsByFloor',
                type: 'POST',
                data: {
                    FloorId: floorId,
                    Type: type
                },
                dataSrc: ''
            },
            columns: [
                {
                    title: 'Zone',
                    data: 'LastKnownZone',
                },
                {
                    title: 'Hiérarchie Map',
                    data: 'MapInfo.mapHierarchyString',
                },
                {
                    title: 'Addresse MAC',
                    data: 'macAddress',
                },
                {
                    title: 'SSID',
                    data: 'ssId',
                },
            ],
            createdRow: (row, data, dataIndex, cells) => {

                const selectedRowProfileId = $('#selectedRowProfileId', window.parent.document).val();

                if (selectedRowProfileId !== '') {

                    if (data['ProfileId'] === selectedRowProfileId) {

                        $(row).addClass('selectedCustom');
                    }

                }
            },

            initComplete: function (settings, json)
            {
                const response = json;

                 //Show the respone on other part of the page
            }
      }).order([[1, 'asc']]).draw(false);
}

Я хотел бы знать, что может вызвать повторную загрузку страницы, а также знать, как работает разбиение на страницы.

Answer 1

Вам не нужно вызывать order([[1, 'asc']]).draw(false) после инициализации таблицы, просто добавьте

order: [[1, 'asc']]

к свойствам таблицы, как это

$(document).ready(function(){
    let table = $('#data-table').DataTable({
                order: [[1, 'asc']],
                //Other properties
});

Поскольку вы не используете server-side DataTables будет выполнять разбиение на страницы автоматически при нажатии кнопок нумерации страниц, учитывая, что все данные уже были загружены при первом вызове Ajax, но когда для serverSide установлено значение true каждый раз, когда вы меняете нумерацию страниц, новый Ajax вызов будет производиться таблицами данных, отправляющими дополнительные параметры для pagination, ordering и т. д., и вам потребуется изменить логику query, filters и pagination на основе этих параметров.

Редактировать: Также destroy: true не требуется в вашем случае, так как Документация гласит: «Уничтожьте любую существующую таблицу, соответствующую селектору, и замените ее новыми параметрами».Вы не воссоздаете или не заменяете свою таблицу, поэтому вы можете просто удалить ее