2

JSON ファイル ( jsontext.json) を使用してデータテーブルに入力しようとしています。ほぼすべてのリソースを試しましたが、これを解決できません。すべてのスタックオーバーフロー リソースを試しました。この質問は、投稿された質問とは異なります。

JSONファイルをmy 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

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 に答える