1

对于一个学校项目，我正在创建一个 API，并希望实现 Jquery Datatables。我对 JavaScript 还是很陌生，所以请耐心等待。我浏览了 Datatables.net 网站上的许多示例，但无法完全得到我正在寻找的答案。我想要实现的是用我创建的简单 API 中的数据填充 Jquery 数据表。

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>

数据表.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

感谢发布一些建议的人。似乎有效的实际代码如下：

$(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" },
                ]
            }); 
    }
});


});

我没有考虑的一件事是 JSON 响应的分页。我目前正在使用 feathersJS，它会自动将分页添加到我删除的 REST 服务中。

于 2016-07-11T13:56:50.887 回答
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重新安装。
  • 您需要进行但代码片段中未显示的一项更改是您的 HTML 表中需要有一个空<tbody>标记。这是 dataTables 将从您的表中放置数据的地方。

如果您解决了上述问题并且您的代码仍然无法正常工作，那么它可能与您的 Ajax 调用有关。查看正在发送的请求（如果您不确定如何执行此操作，请使用 Fiddler）并确保正在向您的/targets页面发送 GET 请求并且正在发送回正确的 JSON。

于 2016-07-08T15:12:52.130 回答