数据表 ajax 请求不使用 xhr 但使用本地 json 文件

Question

我在测试期间使用静态 .json 文件加载 table。这适用于以下控制器代码：

 function dashboardResearchPubCtrl($scope, $http, dataService, DTOptionsBuilder, DTColumnBuilder) {
    var vm = this;
    vm.dtInstance = {};
          vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        "contentType": "application/json; charset=utf-8",
        dataType: "json",
        "url": "/api/research-pub.json",
        "type": "GET",
        "data": function ( d ) {
            return JSON.stringify(d);
        }
    })
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withOption('filter', false)
    .withOption('fnPreDrawCallback', function () {
        $("#overlay").show();
    })
    .withOption('fnDrawCallback', function () {
        $("#overlay").hide();
    })
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('content_id').withTitle('Id'),
    DTColumnBuilder.newColumn('content_title').withTitle('Title')
      ];
 }

但是，如果我将 url 从 "url" 更改为：“/api/research-pub.json”（本地 .json 文件）到 "url": "/api/research-pub"（xhr 端点（呈现与文件相同的 json），然后 datatables 加载数据，但我得到的是 datatables warning 提示信息：table_id=dataTable Datatables warning: Requested unknown parameter for id 'content_id'... Chrome 网络显示xhr响应数据，但是datatables 中没有显示任何内容。

是否需要添加或删除参数才能让 xhr 正常工作？谢谢！

这是查看代码：

<div ng-controller="dashboardResearchPubCtrl as vm">
    <table id="dataTable" datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"></table>
 </div>

和json响应：

[[{"rating_cnt":140,"rating_avg":4,"content_id":"122","content_title":"Business-Driven Dealer Training","content_metadata":null,"access_level":"Member","industry":"Automotive","audience_level":"Intermediate","publish_date":"2007-01-24T00:00:00.000Z"},
    {"rating_cnt":350,"rating_avg":4,"content_id":"100","content_title":"HR Training & Assessment","content_metadata":null,"access_level":"Member","industry":"Aerospace","audience_level":"Beginner","publish_date":"2014-11-14T00:00:00.000Z"}
]]

Answer 1

有几个问题：

data()回调应该是dataSrc()
您有一个 JSON 没有关注数据表 parameter paradigm
为什么JSON.stringify()..？没有意义
我认为 .withOption('serverSide', true) 是个错误，因为 JSON 不支持它

在 dataSrc() 中返回 d[0] 因为响应是在表单 [[{},{}..] 上将起作用：

vm.dtOptions = DTOptionsBuilder.newOptions()
  .withOption('ajax', {
    url: "/api/research-pub.json",
    dataSrc: function ( d ) {
      return d[0]  
    }
  })
  ...

演示中的OP代码 -> http://plnkr.co/edit/tHpb3wQbJtxikxnHrWre?p=preview

如果不需要 serverSide: true，我建议改用 promise :

vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
  var defer = $q.defer();
  $http.get('/api/research-pub.json').then(function(result) {
    defer.resolve(result.data[0]);
  });
  return defer.promise;
})
...

数据表 ajax 请求不使用 xhr 但使用本地 json 文件

Datatables ajax request not working with xhr but with local json file

angularjs

angular-datatables