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

由于您没有使用服务器端，当您单击分页按钮时，考虑到所有数据已在第一个Ajax调用中加载，DataTables将自动进行分页，但是，当 serverSide 设置为 true 时，每次更改分页时，数据表都会发送新的 Ajax 调用，为 发送附加参数分页、排序等，您需要更改后端查询、过滤器和分页逻辑基于该参数。

编辑: 您的情况也不需要 destroy: true ，如 Documentation说: “销毁与选择器匹配的任何现有表并替换为新选项。” 您不会重新创建或替换表格，因此只需将其删除即可