数据表列和 JSON 格式答案

【问题标题】：Datatables columns and JSON Format数据表列和 JSON 格式
【发布时间】：2012-10-29 13:01:56
【问题描述】：

我已经根据以下 html 设置了一个数据表

  <script>
       $('#tableListing').dataTable({
        "bAutoWidth" : true,
        "bProcessing" : true,
        "bServerSide" : true,
        "sAjaxSource" : '${actionUrl}',
        "aoColumns":[ 
                       { "sTitle": "ID", "mData": "id" },
                       { "sTitle": "Username", "mData": "userName" },
                       { "sTitle": "Password", "mData": "password" }
                     ]

            }
    });
    </script>

<table id="tableListing" class="display datatable">
            <thead>
                <tr>
                    <th><spring:message code="columnLabel.id" /></th>
                    <th><spring:message code="columnLabel.username" /></th>
                    <th><spring:message code="columnLabel.enabled" /></th>
                </tr>
            </thead>
</table>

来自服务器的 JSON 响应是 [1,"abiieez",true]，它运行良好。但是我已将服务器的响应更改为：

*编辑（更新 JSON 响应）*

{
    "iTotalDisplayRecords": 11,
    "iTotalRecords": 11,
    "aaData": "[{\"creationTime\":0,\"enabled\":true,\"id\":1,\"loginDuration\":0,\"online\":false,\"password\":\"asdasd\",\"userName\":\"abiieez\"},{\"creationTime\":0,\"enabled\":false,\"id\":105,\"loginDuration\":0,\"online\":false,\"password\":\"asdasd\",\"userName\":\"asd1212123\"},{\"creationTime\":0,\"enabled\":false,\"id\":106,\"loginDuration\":0,\"online\":false,\"password\":\"asdsdasd\",\"userName\":\"asdasd23123\"},{\"creationTime\":0,\"enabled\":false,\"id\":107,\"loginDuration\":0,\"online\":false,\"password\":\"asdsdasd\",\"userName\":\"asdasd23123\"},{\"creationTime\":0,\"enabled\":false,\"id\":108,\"loginDuration\":0,\"online\":false,\"password\":\"anak jalanan\",\"userName\":\"alibaba90\"},{\"creationTime\":1351338218227,\"enabled\":false,\"id\":109,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338263527,\"enabled\":false,\"id\":110,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338265078,\"enabled\":false,\"id\":111,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338266329,\"enabled\":false,\"id\":112,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338267247,\"enabled\":false,\"id\":113,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"}]",
    "sEcho": "1"
}

上面的json不被数据表接受，我相信是因为列数不匹配。

有没有办法让我检索这个 json 对象并选择我想在客户端的表上显示哪些列？

【问题讨论】：

标签： json datatables

【解决方案1】：

您可以像这样在 aoColumns 中使用 mData 属性：

 $(document).ready(function() {
            $('#tableListing').dataTable({
               "aoColumns":[ 
                             { "sTitle": "user", "mData": "userName" },
                             { "sTitle": "pass", "mData": "password" },
                             ...
                           ]
                "bAutoWidth" : true,
                "bProcessing" : true,
                "bServerSide" : true,
                "sAjaxSource" : '${actionUrl}'
            });
    });

【讨论】：

我是否已将 sColumns 放在来自服务器的 JSON 响应中？我还需要在 html 中指定第 3 列吗？我仍然有错误“从第 0 行的数据源请求 uknown parameter 'id'”。
在表格初始化的时候需要在html中指定“aoColumns”。
我仍然面临同样的错误。我已经更新了我的数据表初始化。
如果你使用服务器端，你的返回应该是这样的： { "aaData": [{'id': value, 'userName': value, 'password': value}] }跨度>
添加了来自服务器的 JSON 响应。我使用 JSONLint 来验证我的 JSON 响应。