jquery - 在 jQuery 数据表中搜索

Question

我正在使用最新的 jQuery 数据表，目前我能够将数据输入到表中，但每次我尝试搜索时，我都看不到表有任何变化

以下是我的代码

init: function(){
    $('#paginatedData').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: "/bugbounty/viewreports",
            dataSrc: "reportList"
        },
        "columns": [
            {"data": "reportStatus"},
            {"data": "reportID", "render": function(data, type, full, meta){
                return '<a href="reportsummary">'+ data +'</a>';
            }},
            {"data": "summary"},
            {"data": "lastUpdatedDate"},
            {"data": "createdDate"}
        ]
    });

}

我是否需要设置更多附加值，默认搜索不应该设置为 true 吗？

编辑:这是我的 JSON 响应

{reportList:[ { reportID: 'EIBBP-460', eBayUserID: ' ', reportStatus: 'New', summary: 'BugBounty Report created by Raj', lastUpdatedDate: '2015-06-16 04:27', createdDate: '2015-06-16 04:27', paypalLoginID: 'raaj@paypal.com' }, { reportID: 'EIBBP-459', eBayUserID: ' ', reportStatus: 'New', summary: 'BugBounty Report created by Raj', lastUpdatedDate: '2015-06-16 04:25', createdDate: '2015-06-16 04:25', paypalLoginID: 'raaj@paypal.com' }]}

Answer 1

您混淆了客户端和服务器端处理模式。来自 manual :

DataTables has two different modes of processing data (ordering, searching, etc. of data):

Client-side processing - the full data set is loaded up-front and data processing is done in the browser.

Server-side processing - an Ajax request is made for every table redraw, with only the data required for each display returned. The data processing is performed on the server.

在这两种模式下，都可以从服务器加载数据，但名称暗示将在何处执行处理(分页/排序/过滤)。

您已启用服务器端处理模式("serverSide":true)，搜索和过滤应在服务器端完成。由于您的脚本未经过编程来执行此操作，因此您看不到排序/过滤工作。

您的 JSON 响应对于客户端处理有效，但对于服务器端处理无效，see manual以获得正确的响应结构。

解决方案一:禁用服务器端处理模式

如果表中的行不多，您可以禁用服务器端处理模式。要启用客户端，请省略 serverSide 选项或将其设置为 false。在这种情况下，请使用以下代码:

$('#paginatedData').DataTable({
    "ajax": {
        url: "/bugbounty/viewreports",
        dataSrc: "reportList"
    },
    "columns": [
        {"data": "reportStatus"},
        {"data": "reportID", "render": function(data, type, full, meta){
            return '<a href="reportsummary">'+ data +'</a>';
        }},
        {"data": "summary"},
        {"data": "lastUpdatedDate"},
        {"data": "createdDate"}
    ]
});

解决方案 2:添加服务器端处理

或者，如果表中有很多行，您仍然可以使用服务器端处理模式来提高性能，您需要调整脚本以根据提供的参数返回正确的数据结构。

DataTables 发行版在 \examples\server_side\scripts\ 中包含示例 PHP 脚本(server_processing.php 和 ssp.class.php)文件夹来演示实现。