1

我刚刚开始使用 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"]}]}

但我的数据表没有加载数据。我的问题是如何将嵌套的 json 用于数据表"aoColumns":coldata.aoColumns , "aoColumnDefs":coldata.aoColumnsRef,

4

2 回答 2

2

您来自服务器的回复不像您的数据表所期望的那样格式正确。

来自服务器的回复

在回复 DataTables 向服务器发出的每个信息请求时，它希望获得一个具有以下参数的格式良好的 JSON 对象。

int iTotalRecords 总记录数，过滤前（即数据库中的总记录数）

int iTotalDisplayRecords 过滤后的总记录数（即过滤后的总记录数 - 而不仅仅是此结果集中返回的记录数）

字符串 sEcho 从客户端发送的 sEcho 的未更改副本。这个参数会随着每次抽奖而改变（它基本上是一个抽奖次数）——所以实现这一点很重要。请注意，出于安全原因，强烈建议您将此参数“强制转换”为整数，以防止跨站点脚本 (XSS) 攻击。

string sColumns Deprecated Optional - 这是一个列名字符串，以逗号分隔（与 sName 结合使用），如果需要显示，它将允许 DataTables 在客户端重新排序数据。请注意，返回的列名数必须与表中的列数完全匹配。如需更灵活的 JSON 格式，请考虑使用 mData。

array aaData 二维数组中的数据。请注意，您可以使用 sAjaxDataProp 更改此参数的名称。

您可以在此处找到该信息http://www.datatables.net/usage/server-side

于 2013-08-29T13:24:26.643 回答
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}]}

希望它对那些如何面对这个问题的人有所帮助。

于 2013-08-30T07:00:07.140 回答