web-dev-qa-db-ja.com

JQueryDataTables-データを表示しない

JQueryDataTablesを設定しようとしています。必要なのは、テーブルにJSONデータを表示することだけです。

これが私のJSコードです。 myObjはすでにJSONオブジェクトであることがわかっていますが、これについて気が狂っているので、安全のためにJSON.stringifyを介して渡しました。

_var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
var data = JSON.stringify(myObj);

$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": data,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});
_

HTMLコード：

_  <html>
        <head>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="assets/css/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
        </head>
    <body>
        <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
  <script src="assets/js/dataLoader.js"></script>
    </body>
    </html>
_

私はフォーマットが得意ではありませんが、あなたはその考えを理解しています。上記のJSコードはdataLoader.jsファイルにあります。問題は、htmlファイルを実行するとこのdataTablesエラーが発生することです。

DataTables警告：table id = table-行0、列0に不明なパラメーター 'name'を要求しました。

nameが何なのかわからないのは本当に混乱しています。 console.log(data.name)を実行すると、Johnが返されます。データが表示されないのはなぜですか？

javascriptjqueryhtmljsondatatables
4
menix

タイプはarrayである必要があります。 dataオプション のドキュメントのType見出しを参照してください。

説明

DataTablesは、この初期化パラメーターを使用して行データの配列として渡されるなど、さまざまなソースからテーブルの本体に表示するデータを取得できます。他の動的データソースと同様に、配列またはオブジェクトを各行のデータソースに使用でき、特定のオブジェクトプロパティからの読み取りには _columns.data_ が使用されます。

タイプ

このオプションは、次のタイプで指定できます。

array | Type1

表示されたエラーは、datatablesコードが単一のオブジェクトをデータの配列として処理しようとした結果でした。

したがって、JSON.stringify()からdataに値を割り当てる代わりに、dataをmyObjを含む配列にします（将来的には、その配列にさらにオブジェクトを追加できます）：

_var data = [myObj];
_

以下に適用される変更を参照してください。

_var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
var data = [myObj];//JSON.stringify(myObj);

$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": data,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});_
_<link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="assets/css/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
        <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>_

1https://datatables.net/reference/option/data

5
Sᴀᴍ Onᴇᴌᴀ
  1. データが配列されていませんでした。
  2. 文字列化する必要はありません。すでに文字列になっています。

実例は次のとおりです。

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];


$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": myObj,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
 
 <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
1
jagdish.narkar

これを試していただけませんか：

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];
$(document).ready(function() {
$('#table').DataTable( {
    "ordering": true,
    "data": myObj, //should be an object.
    "searching": false,
    "columns": [
      {'data':'name'},
      {'data':'age'},
      {'data':'address'},
      {'data':'city'}
    ]

});
0
Luong Dinh