jquery Datatable 操作导致整个页面重新加载答案

【问题标题】：jquery Datatable manipulation causing the entire page to reloadjquery Datatable 操作导致整个页面重新加载
【发布时间】：2019-09-19 19:00:10
【问题描述】：

我有一个最初使用 ajax 调用填充的 jQuery 数据表，当我单击表上的任意位置（如分页编号或显示长度下拉列表）时，整个页面将无限重新加载。这是我填充数据表的方式。

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

我想知道是什么导致页面重新加载，也想知道如何使分页工作。

【问题讨论】：

标签： javascript jquery datatables

【解决方案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 时当您更改分页时，将通过数据表发送pagination、ordering 等的附加参数来进行新的Ajax 调用，您将需要更改后端query、filters 和pagination 逻辑基于那个参数。

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

【讨论】：

我确实像你说的那样，但仍然要永远重新加载页面。请参阅帖子中的表格快照。谢谢
您能否检查一下您是否在控制台或 ajax 响应中收到任何错误？
尝试删除第一行“let table=...”并删除函数populateTable，然后在$(document).ready({...})上初始化你的表，我想这个应该修复它
但我需要在其他函数中使用全局变量 table 以便在用户与应用程序交互时更改表格内容。
您可以保留全局变量，但只需初始化一次，如下所示： $(document).ready(function(){ let table = $('#data-table').DataTable ({...}) });