首页 > 解决方案 > Jquery Datatables 客户端优化

问题描述

我在服务器端处理中使用Jquery 数据表库很长时间了,但是当我使用过滤器搜索时遇到了很多问题,因为呈现的数据与数据库值的值不同。

所以我有一个新项目,我决定使用数据表客户端。所以我有一个 ajax 调用来获取我的所有数据。但是如果我对 100 000 行进行关系查询,php 真的很慢。

然后的想法是使用限制向客户端显示一些数据并在后台处理并在正常时显示所有结果。我在数据表文档中看到了 deferRender方法,但没有看到任何变化。

因此,我使用限制参数进行第一次 ajax 调用,显示结果,然后在没有限制参数的情况下进行第二次 ajax 调用,然后显示所有结果。

问题在于总记录的数量......当第一次调用填充表时,我有限制的总记录,所以我没有真正的总记录数。它在第二次初始化。

如何在第一次通话时编辑总记录编号以显示最终分页和最终“显示 x 到 y 的 z 条目”?或者也许我做错了,还有另一种好方法可以做我想做的事。

这是我的数据表初始化:

$('#foldersTable').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: false,
    serverSide: false,
    aaSorting: [[2, 'desc']],
    createdRow: addDataAttr,
    drawCallback: keepSelectedRow,
    rowId: 'id',
    lengthChange: false,
    iDisplayLength: 10,
    deferRender: true,
    initComplete: function(settings, json) {
        $('.table-responsive').show();
        limit = false;
        $('#foldersTable').DataTable().ajax.reload(null, false);
    },
    ajax: {
        url: 'getFolders',
        method: 'POST',
        dataSrc: checkSessionDT,
        data : { "limit" : function() { return limit; } }
    },
    language: {
        lengthMenu: datatable_lang.lengthMenu,
        zeroRecords: datatable_lang.zeroRecords,
        info: datatable_lang.info,
        infoEmpty: datatable_lang.infoEmpty,
        infoFiltered: datatable_lang.infoFiltered,
        search: datatable_lang.search,
        searchPlaceholder: datatable_lang.searchPlaceholder,
        paginate: {
            previous: datatable_lang.paginate.previous,
            next: datatable_lang.paginate.next
        }
    },
    columns: [
        {data: "Column A", width:"20%"},
        {data: "Column B", width:"20%", orderData:[1, 0]},
        {data: "Column C", render: renderFunction, width:"20%", orderData:[2, 0], type: "date-euro"},
        {data: "Column D", width:"20%", orderData:[3, 0]},
        {data: "Column E", width:"20%", orderData:[4, 0]}
    ]
});

我希望你能帮助我。

标签: javascriptphpjqueryajaxdatatables

解决方案


推荐阅读