jquery 数据表操作导致整个页面重新加载

Question

I have a jQuery datatable that is initially populated using ajax call, and when i click anywhere on the table like pagination number or display length dropdown list, the whole page is reloaded indefinetely . Here is how i populate the datatable.

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

I would like to know what could be causing page re-load and also know how to make pagination works.

Answer 1

You don't need to call order([[1, 'asc']]).draw(false) after table initialization, just add

order: [[1, 'asc']]

to your table properties, like this

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

As you are not using server-side DataTables will make pagination automatically when you click pagination buttons, considering that all data has already been loaded in the first Ajax call, but when serverSide is set to true every time you change the pagination a new Ajax call will be made by datatables sending aditional parameters for pagination , ordering etc and you will need to change you backend query , filters and pagination logic based on that params.

Edit: Also destroy: true is not needed in your case, as Documentation says: "Destroy any existing table matching the selector and replace with the new options." You are not re-creating or replacing your table, so you can just remove it