2016-07-19 9 views
1

テスト中に静的な.jsonファイルを使用してテーブルをロードしています。これは、次のコントローラコードで正常に動作します:Datatables ajaxリクエストはxhrではなくローカルのjsonファイルで動作します

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を変更する場合:「URL」に「/api/research-pub.json」(ローカル.jsonファイル): "/ api/research-pub"(xhrエンドポイント(ファイルと同じjsonをレンダリングする))、データテーブルはデータをロードしますが、代わりにデータテーブル警告警告メッセージが表示されます:table_id = dataTable Datatables警告: 「CONTENT_IDは」...クロームネットワークは、XHRレスポンスデータを示しているが、何ものDataTableに現れていない。

私は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"} 
]] 

答えて

1

いくつかの問題があります。

  • data()コールバックがdataSrc()
  • する必要がありますあなたはJSONを持っていますデータテーブルに従わないparameter paradigm
  • なぜJSON.stringify() ..?

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

    OPを:それは私が.withOption('serverSide', true)信じる

  • は、応答が動作するフォーム[[{},{}..]上にあるので、JSONはdataSrc()d[0]を返すことに

をサポートしていないので、間違いである意味がありませんデモのコード - >http://plnkr.co/edit/tHpb3wQbJtxikxnHrWre?p=preview

serverSide: trueは必要ありませんが、代わりに約束を使用することをおすすめします。

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

ありがとう! plnkrの両方の例がうまくいき、役立っています。 myjson.comのリファレンスも非常に役に立ち、今後ajaxリクエストとxhrエンドポイントを迅速にテストするのに役立ちます。 –

+0

David、to and dateをとるpublish_dateカラムに日付フィルタを追加する簡単な方法はありますか?例えばval()&& publish_date <= $( '#endDate')。ここでは、publish_date> = $( '#startDate' –

関連する問題