Question

我正在尝试使用JSON文件填充我的数据表（jsontext.json）我尝试了几乎所有的资源但是无法解决这个问题。我已经尝试了所有的stackoverflow资源。这个问题与发布的问题不同。

如果我可以将JSON文件放入我的jsonObject中，那么其余的我可以搞清楚。

Json文件存储在我的c：\ path \ jsontext.json

中

这是json文件

[
    {
        "Identifier": "1",
        "Label": "pratik",
        "Categories": "Standard",
        "UpdatedBy": "lno",
        "UpdatedAt": "01-02-2013"

    },
    {
        "Identifier": "2",
        "Label": "2013",
        "Categories": "Standard",
        "UpdatedBy": "lno",
        "UpdatedAt": "01-02-2013"
    }
]

我尝试了以下js代码将文件导入jsonObject

var myObject;
    $.ready(function(){
        myObject={};
        $.getJSON('http://localhost:8080/jsontext.json', function(data){
        /* here I have tried using both the paths the c:\path\jsontext.json and the one above */
         myObject=data;
        });
    });

一旦我将它放入JsonObject，我可以使用以下代码填充数据表

$(document).ready(function(){
        $('#example').dataTable
        ( {
            "sScrollY": "200px",
            "bPaginate": false,
            "bScrollCollapse": true,
            aaData:myObject,

            "aoColumns":
                    [
                        { "mData": "Identifier" },
                        { "mData": "Label" },
                        { "mData": "Categories" },
                        { "mData": "UpdatedBy" },
                        { "mData": "UpdatedAt" },
                        { "sClass": "getimage"},
                        { "sClass": "editimage"},
                        { "sClass": "deleteimage"}


                    ]
        });
    });

这是我的jsp页面中的html主体

<body id="dt_example">
<div id="container">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<ul>
    <li> <a href="addedit.jsp">Add Code Edit</a></li>
    <li> <a href="#">Import</a></li>
    <li> <a href="#">Export</a></li>
</ul>
<tr>
    <th>Identifier</th>
    <th>Label</th>
    <th>Categories</th>
    <th>UpdatedBy</th>
    <th>UpdatedAt</th>
    <th></th>
    <th></th>
    <th></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Row 1 Data 1</td>
    <td>Row 1 Data 2</td>
    <td>Row 1 Data 3</td>
    <td>Row 1 Data 4</td>
    <td>Row 1 Data 5</td>
    <td class="getimage"><a href="addedit.jsp"></a></td>
    <td class="editimage"></td>
    <td class="deleteimage"></td>

</tr>
</tbody>
</table>
</div>
</body>
</html>

任何人都可以告诉我哪里出错了。

Answer 1

实际上，如果您在开发人员工具中看到服务器响应，则可以找到收到的数据。就我使用dataTables而言，json文件必须包含整个数据的“键”，否则它不会有任何引用。

尝试按如下方式修改json：

{
  "mydata":[

  {
    "Identifier": "1",
    "Label": "pratik",
    "Categories": "Standard",
    "UpdatedBy": "lno",
    "UpdatedAt": "01-02-2013"

  },
  {
    "Identifier": "2",
    "Label": "2013",
    "Categories": "Standard",
    "UpdatedBy": "lno",
    "UpdatedAt": "01-02-2013"
  }
 ]
}

如果要使用“aaData”以外的json对象，可以使用数据表的"sAjaxDataProp"来指定相应的对象。

Answer 2

看起来问题可能是你的ajax正在加载并设置myObject变量，但它是在Datatables初始化之后完成的，因此在你的请求完成后它不会获得更新的myObject变量。你可以做这样的事情来解决这个问题：

var myObject;
$.ready(function(){
    myObject={};
    $.getJSON('http://localhost:8080/jsontext.json', function(data){
    /* here I have tried using both the paths the c:\path\jsontext.json and the one above */
     myObject=data;
    $('#example').dataTable().fnAddData(myObject);
    });
});

Answer 3

感谢您的回复每一个我都得到了答案，我尝试过，谢谢。

var someData=JSON.parse(document.getElementById("populate-holdingBin").innerHTML);
    oTables=$('#someReport').dataTable
        ({
            "bJQueryUI":true,
            "bScrollCollapse":true,
            aaData:someData,
            "aoColumns":
                   [ ...etc etc.............................. ]
         });

从本地json文件填充数据表

3 个答案: