2

我正在尝试使用 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>

谁能告诉我哪里出错了。

4

3 回答 3

2

实际上，如果您在开发人员工具中看到服务器响应，您可以找到接收到的数据。就我使用数据表而言，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”来指定相应的对象。

于 2013-10-07T14:25:49.197 回答
1

看起来问题可能是您的 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);
    });
});
于 2013-06-13T20:47:30.880 回答
0

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

var someData=JSON.parse(document.getElementById("populate-holdingBin").innerHTML);
    oTables=$('#someReport').dataTable
        ({
            "bJQueryUI":true,
            "bScrollCollapse":true,
            aaData:someData,
            "aoColumns":
                   [ ...etc etc.............................. ]
         });
于 2013-10-07T14:54:37.250 回答