我刚开始使用datatables 1.9 jquery插件但面向从服务器端获取数据表配置。 我的数据表代码是:
$.ajax({
type: "POST",
url: "./viewController",
data:{ "TableName" : "ViewGridDept",
"Call" : "gridConfiguration"},
dataType:"json",
success: function(data){
//columns=data.aoColumns;
var coldata = eval( '('+data+')' );
alert(coldata.aoColumns);
employeeTable = $("#EmployeeTable").dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bFilter": true,
"bInfo": true,
"bServerSide": true,
"sAjaxSource" : "./viewController",
"aoColumns":coldata.aoColumns ,
"aoColumnDefs":coldata.aoColumnsRef,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name" : "TableName", "value" : "ViewGridDept" },
{ "name" : "Call", "value" : "Data" } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );}
我的服务器端json是
{"aoColumns":[{"mDataProp":"deptName","sTitle":"Department Name"},{"mDataProp":"deptId","sTitle":"Department Id"}],"aoColumnsRef":[{"aTarget":["2"]},{"aTarget":["1"]}]}
但是我的数据表没有加载data.my的问题是如何使用嵌套的json作为数据表"aoColumns":coldata.aoColumns ,
"aoColumnDefs":coldata.aoColumnsRef,
答案 0 :(得分:2)
您对服务器的回复并不像数据表所期望的那样完善。
找到该信息来自服务器的回复
为了回复DataTables向服务器发出的每个信息请求,它希望得到一个结构良好的JSON对象,其中包含以下参数。
int iTotalRecords过滤前的总记录(即数据库中的记录总数)
int iTotalDisplayRecords过滤后的总记录(即应用过滤后的记录总数 - 不仅仅是此结果集中返回的记录数)
string sEcho从客户端发送的未更改的sEcho副本。此参数将随每次绘制而变化(它基本上是绘制计数) - 因此实现此参数非常重要。请注意,出于安全原因,强烈建议您将此参数强制转换为整数,以防止跨站点脚本(XSS)攻击。
string sColumns Deprecated可选 - 这是一个列名称字符串,以逗号分隔(与sName结合使用),如果显示需要,它将允许DataTables在客户端重新排序数据。请注意,返回的列名称数必须与表中的列数完全匹配。有关更灵活的JSON格式,请考虑使用mData。
array aaData 2D数组中的数据。请注意,您可以使用sAjaxDataProp更改此参数的名称。
答案 1 :(得分:1)
string sColumns Deprecated Optional是该问题的主要原因。现在我正在使用oaColumnDefs,我的工作代码是:
$(document).ready(function() {
var columns;
$.ajax({
type: "POST",
url: "./viewController",
data:{ "TableName" : "ViewGridDept",
"Call" : "gridConfiguration"},
dataType:"json",
success: function(coldata){
//columns=data.aoColumns;
//var coldata = eval( '('+data+')' );
alert(coldata.aoColumnsRef);
employeeTable = $("#EmployeeTable").dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bFilter": true,
"bInfo": true,
"bServerSide": true,
"sAjaxSource" : "./viewController",
//"aoColumns":coldata.aoColumns ,
"aoColumnDefs":coldata.aoColumnsRef,
//"aoColumnDefs":[{"sTitle":"Department Name","mDataProp":"deptName","aTargets":"[1]"},{"sTitle":"Department ID","mDataProp":"deptId","aTargets":"[0]"}],
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name" : "TableName", "value" : "ViewGridDept" },
{ "name" : "Call", "value" : "Data" } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );}
});
}
});
第一个请求的和json现在是:
{"aoColumnsRef":[{"aTargets":[1],"mDataProp":"deptName","sTitle":"Department Name","bVisible":true,"bSearchable":true},{"aTargets":[0],"mDataProp":"deptId","sTitle":"Department Id","bVisible":true,"bSearchable":false}]}
希望对那些如何面对这个问题的人有所帮助。