1

学校のプロジェクトでは、API を作成していて、Jquery Datatables を実装したいと考えていました。私はまだJavaScriptにかなり慣れていないので、ご容赦ください。Datatables.net サイトで多くの例をスキャンしましたが、探している答えが得られません。私が達成しようとしているのは、作成した単純な API からのデータを Jquery Datatable に入力することです。

html テーブル:

<table id="campaignTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>_id</th>
            <th>name</th>
            <th>email</th>
            <th>position</th>
        </tr>
    </thead>
    <tfoot>
            <th>_id</th>
            <th>name</th>
            <th>email</th>
            <th>position</th>
    </tfoot>
    </table>

datatables.js:

$('#campaignTable').DataTable( {
            "ajax": { 
            "url": "/targets",
            "dataSrc": "data",
        },
             "aoColumns": [

              {"columns": "_id" },
              {"columns": "name" },
              {"columns": "email" },
              {"columns": "position" },
                        ]
                });
});

API ルートの出力http://localhost:3030/targets : :

{
"total": 4,
"limit": 100,
"skip": 0,
"data": [
    {
        "_id": "577f6e04077321f331d8fbba",
        "name": "test",
        "email": "test@email.nl",
        "position": "CEO",
        "__v": 0
    },
    {
        "_id": "577f6e08077321f331d8fbbb",
        "name": "test1",
        "email": "test@email.nl",
        "position": "CEO",
        "__v": 0
    },
    {
        "_id": "577f6e0b077321f331d8fbbc",
        "name": "test2",
        "email": "test@email.nl",
        "position": "CEO",
        "__v": 0
    },
    {
        "_id": "577f6e0d077321f331d8fbbd",
        "name": "test3",
        "email": "test@email.nl",
        "position": "CEO",
        "__v": 0
    }
]

}

同じ構造を使用して単純な変数をテーブルに入力することはできますが、ajax/rest 呼び出しを使用すると少し難しくなります。他のいくつかの例は、API からの JSON の出力と関係がある可能性があることを示唆しています。しかし、それを変更する方法がわかりません。

どんな助けでも大歓迎です、ありがとう!

4

2 に答える 2

0

構文にはいくつかの異なる問題があります。改善された js コード (主な変更が必要なコード) を投稿し、変更点について説明します。

$('#campaignTable').DataTable( {
        "ajax": "/targets", //One thing is to check is that this is actually the right path
        //You don't need dataSrc if the source is "data", that's default
         "columns": [

          {"data": "_id" },
          {"data": "name" },
          {"data": "email" },
          {"data": "position" },
         ]
});
  • @Adamは正しく、aoColumns非推奨です（ただし、まだ機能しています）。columns本当に構文を使用する必要があります。
  • dataSrcを使用している場合は、それがデフォルト設定であるため、指定する必要はありません"data"(ただし、含めても問題ないため、削除したくない場合は削除する必要はありません)。他のすべてを修正してもまだ機能しない場合は、元にdataSrc戻してみてください。
  • コード スニペットには示されていませんが、必要な変更の 1 つは、HTML テーブルに空の<tbody>タグを含める必要があることです。これは、dataTables がテーブルからデータを配置する場所です。

上記の問題を修正してもコードが機能しない場合は、おそらく Ajax 呼び出しに関係しています。送信されているリクエストを調べて (方法がわからない場合は Fiddler を使用してください)、GET リクエストが/targetsページに送信され、適切な JSON が返されていることを確認してください。

于 2016-07-08T15:12:52.130 に答える
0

いくつかの提案を投稿してくれた人たちに感謝します。動作しているように見えた実際のコードは次のとおりです。

$(document).ready(function() {

$.ajax({

url: '/targets',
method: 'get',
dataType: 'json',
success: function (data){

$('#targetTable').DataTable( {
        dom: 'Bfrtip',  
        buttons: [
            'csv','pdf'
        ],   
        data: data,                         
        columns: [

              {"data": "_id" },
              {"data": "name" },
              {"data": "email" },
              {"data": "position" },
                ]
            }); 
    }
});


});

私が考慮しなかったことの 1 つは、JSON 応答のページ付けです。現在、削除したRESTサービスにページネーションを自動的に追加するfeathersJSを使用しています。

于 2016-07-11T13:56:50.887 に答える