CODEWITHSUNDEEP
angularjsangular-datatables
lance-p
lance-p

Reputation: 1070

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

I'm using a static .json file to load a table during testing. This works fine with the following controller code:

 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')
      ];
 }

However, if I change the url from "url": "/api/research-pub.json" (a local .json file) to "url": "/api/research-pub" (the xhr endpoint (which renders the same json as the file), then datatables load the data, but instead I get the datatables warning alert message: table_id=dataTable Datatables warning: Requested unknown parameter for id 'content_id'... Chrome network shows the xhr response data, but nothing shows up in datatables.

Is there a parameter I need to add or remove to get the xhr working? Thanks!

This is the view code:

<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>

and json response:

[[{"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"}
]]

Upvotes: 1

Views: 1307

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

There are a few issues :

  • The data() callback should be dataSrc()
  • You have a JSON not following dataTables parameter paradigm
  • Why JSON.stringify()..? It does not make sense
  • I believe .withOption('serverSide', true) is a mistake since the JSON not support it

Returning d[0] in dataSrc() since the response is on the form [[{},{}..] will work :

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

The OP code in a demo -> http://plnkr.co/edit/tHpb3wQbJtxikxnHrWre?p=preview

If serverSide: true not is required, I would recommend using a promise instead :

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;
})
...

Upvotes: 1

Related Questions