jQuery数据表错误地解析json

问题描述

我正在尝试使用具有以下json对象的查询的数据表的示例...

I'm just trying an example of datatables with query with the following json object...

[{"firstName":"pom",
"lastName":"sdfpom",
"email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave",
 "access":null,
"id":1},
{"firstName":"FirstName",
"lastName":"LastName",
"email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username",
"access":null,
"id":2}]

这是在下面的变量数据中返回的...

This is returned in the variable data below...

<script>
$(document).ready(function() {
    $.getJSON('userManagement/getAllUsers', function(data) {
            $('#table').dataTable( {
                "sAjaxSource": data
        });
    });
});

    </script>
    <table id="table">
        <thead>
            <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>email</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table>

现在JSON似乎是有效的，当我做任何其他事情，例如使用它jquery它工作正常，但是数据表根本不能正确渲染。在我使用的JavaScript中有什么问题吗？

Now the JSON seems to be valid, and when I do anything else with it for instance use it within jquery it works fine, but datatables just doesn't render correctly at all. Is there something wrong with the javascript I'm using?

推荐答案

默认情况下，DataTables会处理数组的数组来源：当必须处理数组的对象（如你的情况）时，还有一个额外的步骤。这在插件文档中的中有描述。基本上，你要做的是添加'列'属性（如array）的描述：

By default, DataTables will process an array of arrays for its data source: there's an additional step when it has to deal with array of objects (as in your case). It's described in this example in the plugin documentation. Basically, what you have to do is to add description of 'column' properties (as array):

$('#table').dataTable({
  "aaData": data,
  "aoColumns": [
    { "mData": "firstName" },
    { "mData": "lastName" },
    { "mData": "email" },
    { "mData": "password" },
    { "mData": "username" },
    { "mData": "access" },
    { "mData": "id" }
  ]
});

这里是来玩。

Here's fiddle to play with.

这篇关于jQuery数据表错误地解析json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！