jQuery 数据表：使用 Ajax 分页进行搜索和过滤

Posted 2023-03-10

【中文标题】jQuery 数据表：使用 Ajax 分页进行搜索和过滤

【英文标题】：jQuery Datatables : Searching and filtering with Ajax pagination

【发布时间】：2015-12-03 00:16:28

【问题描述】：

我有一个包含 36000 个条目的 SQL 表，要显示在数据表列表中。 分页效果很好，因为我是这样开发的：

var table = $('.datatable').DataTable(
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : 
        url :"ajax.php",
        type: "post",
    
);

在我的文件 ajax.php 中，我只是根据页码设置的限制回显我的行（JSON 编码）。

问题是本机过滤和搜索不再有效。 当我想过滤一列时，“处理”层出现，然后消失，但我的数据'仍然相同。 当我想通过表格进行研究时，什么也没有发生。

所以，这是我的问题：

如何恢复搜索和过滤？ 如何过滤和搜索所有行（不仅是显示的行）？使用 Ajax，是的，但是在 Jquery 中如何？

提前致谢

编辑： 感谢 Abdul Rehman Sayed，我设法完成了搜索部分。 这是我所做的：

var table = $('.datatable').DataTable(
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : 
        data : function(d) 
            d.searching = get_search($('.datatable'));
        ,
        url :"ajax.php",
        type: "post",
    ,
    searching : false,
);

$('.datatable thead th').each(function() 
    var title = $(this).data('name');
    $('.datatable').find('tfoot tr').append('<td><input type="text" name="'+title+'"/></td>');
);

table.columns().every(function() 
    var that = this;
    $('input', this.footer()).on('keyup', function(e) 
        that.search(this.value).draw();
    
);

function get_search(datatable) 
    var result = [];
    datatable.find('tfoot').find('input').each(function() 
        result.push([$(this).attr('name'), $(this).val()]);
    );
    return result;

为了过滤，我开发了一个丑陋的代码：

$('.datatable').find('th').click(function() 
    var item = $(this);
    removeClasses($('.datatable'), item.index());
    if(item.hasClass('sorting_asc')) 
        item.removeClass('selected_asc').addClass('selected_desc');
     else 
        item.removeClass('selected_desc').addClass('selected_asc');
    
);

function get_sorting(datatable) 
    var result = false;
    datatable.find('th').each(function() 
        var item = $(this);
        var name = item.data('name');
        if(item.hasClass('selected_asc')) 
            result = name+' ASC';
         else if(item.hasClass('selected_desc')) 
            result = name+' DESC';
         else 
            // continue
        
    );
    return result;


function removeClasses(datatable, index) 
    datatable.find('th').each(function() 
        if($(this).index() !== index) 
            $(this).removeClass().addClass('sorting');
        
    );

【问题讨论】：

你在服务器端处理分页，你还需要在服务器端处理搜索和排序。当您发出搜索/排序请求时，您可以在查询字符串中看到相关参数，完整列表见here

你能链接jsfiddle吗

【参考方案1】：

您必须在服务器端进行所有搜索和过滤。

对于搜索/过滤或页面的每个请求，数据表将所有这些作为表单数据传递给服务器页面。 参考https://www.datatables.net/manual/server-side

您将不得不使用此表单数据对 sql 表上的记录进行过滤/搜索/分页并将其相应地传递给客户端。

数据表仅显示它从服务器获取的内容。

【讨论】：

感谢您的回答。我设法完成搜索部分（请参阅编辑的原始帖子），但我不知道如何管理过滤。请问你有什么想法吗？

这里有一个php的服务器端脚本：datatables.net/examples/server_side/object_data.html

【参考方案2】：

只需在 URL 本身中传递参数

var table = $('.datatable').DataTable(
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : 
        url :`ajax.php?param_name=$$("#filter").val()`
    
);

此代码将起作用

【讨论】：

最好使用 post 方法和自定义数据，如 ajax: url: "url", data: function (d) d.custom_param1="a"; d.custom_param2="b";