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

Question

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

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

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

问题是本机过滤和搜索不再有效。当我要过滤列时，"Processing" 层出现，然后消失，但我的数据'仍然相同。当我想通过 table 进行研究时，没有任何反应。

所以，这是我的问题：

如何恢复搜索和过滤？
如何过滤和搜索所有行（不仅是显示的行）？使用 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');
        }
    });
}

Answer 1

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

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

您必须将此表单数据用于 filter/search/paginate sql table 上的记录，并将其相应地传递给客户。

数据table 仅显示从服务器获取的数据。

Answer 2

只需在 URL 本身传递参数

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

此代码有效

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

jQuery Datatables : Searching and filtering with Ajax pagination

search

jquery

pagination

filtering

datatables