1

次の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に何か問題がありますか？

4

4 に答える 4

5

デフォルトでは、DataTables はデータ ソースの配列の配列を処理します。(あなたの場合のように) オブジェクトの配列を処理する必要がある場合は、追加の手順があります。プラグインのドキュメントのこの例で説明されています。基本的に、「列」プロパティの説明を (配列として) 追加する必要があります。

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

ここで遊ぶためのフィドルです。

于 2012-10-11T17:12:53.313 に答える
1

あなたのjsonは配列内のオブジェクトです..

だからこれの代わりに

"sAjaxSource": data

これを試して

"sAjaxSource": data[0]
于 2012-10-11T17:07:31.963 に答える
0

まず最初に、json が有効かどうか、目的に www.jsonlint.com を使用していないかどうかを確認してください。

次に、次のように JSON オブジェクトを aaData で囲みます。

{"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}] 
}
于 2012-10-12T10:44:24.797 に答える