在jQuery数据表中搜索
我使用的是最新的jQuery Datatables,目前我能够将数据放入表中,但每次尝试搜索时,我都没有看到表的任何更改 下面是我的代码在jQuery数据表中搜索,jquery,jquery-datatables,Jquery,Jquery Datatables,我使用的是最新的jQuery Datatables,目前我能够将数据放入表中,但每次尝试搜索时,我都没有看到表的任何更改 下面是我的代码 init: function(){ $('#paginatedData').DataTable({ "processing": true, "serverSide": true, "ajax": { url: "/bugbounty/viewreports",
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"}
]
});
}
init:function(){
$('#paginatedData')。数据表({
“处理”:对,
“服务器端”:正确,
“ajax”:{
url:“/bugbounty/viewreports”,
dataSrc:“报告列表”
},
“栏目”:[
{“数据”:“报告状态”},
{“数据”:“报告ID”,“呈现”:函数(数据、类型、完整、元){
返回“”;
}},
{“数据”:“摘要”},
{“数据”:“LastUpdateDate”},
{“数据”:“createdDate”}
]
});
}
我是否需要设置其他值,搜索是否默认设置为true
编辑:这是我的JSON响应
{reportList:[{reportID:'EIBBP-460',
eBayUserID:“”,
reportStatus:'新',
总结:“Raj创建的BugBounty报告”,
最新更新日期:“2015-06-16 04:27”,
创建日期:“2015-06-16 04:27”,
佩帕洛吉尼:'raaj@paypal.com' },
{reportID:'EIBBP-459',
eBayUserID:“”,
reportStatus:'新',
总结:“Raj创建的BugBounty报告”,
最新更新日期:“2015-06-16 04:25”,
创建日期:“2015-06-16 04:25”,
佩帕洛吉尼:'raaj@paypal.com'}]}
您混淆了客户端和服务器端处理模式。从: DataTables有两种不同的数据处理模式(数据排序、搜索等): 客户端处理—预先加载完整的数据集,并在浏览器中完成数据处理 服务器端处理—对每个重新绘制的表发出Ajax请求,只返回每个显示所需的数据。数据处理在服务器上执行 在这两种模式下,都可以从服务器加载数据,但名称表示将在何处执行处理(分页/排序/筛选) 已启用服务器端处理模式(
“服务器端”:true
),应在服务器端执行搜索和筛选。由于您的脚本未编程为执行此操作,因此您认为排序/筛选不起作用
您的JSON响应对于客户端处理有效,但对于服务器端处理无效,以获得正确的响应结构
解决方案1:禁用服务器端处理模式
如果表中没有太多行,可以禁用服务器端处理模式。要启用客户端,请省略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"}
]
});
$('paginatedData')。数据表({
“ajax”:{
url:“/bugbounty/viewreports”,
dataSrc:“报告列表”
},
“栏目”:[
{“数据”:“报告状态”},
{“数据”:“报告ID”,“呈现”:函数(数据、类型、完整、元){
返回“”;
}},
{“数据”:“摘要”},
{“数据”:“LastUpdateDate”},
{“数据”:“createdDate”}
]
});
解决方案2:添加服务器端处理
或者,如果表中有许多行,仍然可以使用服务器端处理模式来提高性能,则需要根据提供的参数调整脚本以返回正确的数据结构
DataTables发行版在
\examples\server\u-side\scripts\
文件夹中包含一个PHP脚本示例(server\u-processing.PHP
和ssp.class.PHP
),以演示该实现。由于您启用了服务器端处理模式(“server-side”:true
),因此应在服务器上执行搜索和筛选。您是否在/bugbounty/viewreports
处理搜索请求时编写脚本?请发布你的JSON回复。@Gyrocode.com我已将我的JSON回复附在帖子上,我如何在服务器端添加搜索和过滤呢?这只是一个数据样本,它实际返回的数据比我发布的数据多,而且我忘了在我已更正的JSON中添加dataSrcit@Raj,我根据您的更新更正了答案,dataSrc
是正确的。您能提供它们所在的链接吗?在服务器端显示用于搜索的代码段我不明白为什么我需要服务器端操作来搜索和filtering@Raj,示例PHP脚本(server\u processing.php
和ssp.class.php
)位于“\examples\server\u-side\scripts”中。