jQuery的数据表解析JSON错误地(jQuery datatables parsing json

2019-09-24 00:28发布

我只是想用下面的JSON对象查询的数据表的一个例子...

[{"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}]

这回在下面的可变数据...

<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?

Answer 1:

默认情况下,将数据表处理数组的数组,它的数据源:有,当它要处理的对象数组的额外步骤(如你的情况)。 它是在描述这个例子中的插件文档。 基本上,你所要做的是添加的“列”属性描述(如数组):

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

这里的小提琴一起玩。



Answer 2:

您的JSON是一个数组对象 ..

因此,而不是这个

"sAjaxSource": data

尝试这个

"sAjaxSource": data[0]


Answer 3:

$.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": aoData,
          contentType: "application/json; charset=utf-8",
          async : false,
          success: function (json) { 
            fnCallback(json);
          },
          complete: function (msg,a,b) {
            console.log('complete :'+msg) 
          },
          error : function(msg,a,b) {
            console.log('error:'+msg);
          }
        } );

异步:假是非常重要的。 这将导致直到JSON数据正确界定不来渲染页面。

这为我工作。



Answer 4:

首先,检查你的JSON是有效或不使用www.jsonlint.com为宗旨。

其次尝试用aaData喜欢附上JSON对象:

{"aaData" :[{"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}] 
}


文章来源: jQuery datatables parsing json incorrectly