2016-06-29 6 views
0

データテーブルインスタンスをロードするために、データテーブル1.10.12で角度データテーブル(0.5.2)を使用しています。 UIでは、データを日付範囲で制限するために、ユーザーが選択するDatePicker(開始日と終了日)を指定します。ユーザーが送信ボタンをクリックすると、データテーブルajaxリクエストをサーバーに送り返して、開始日と終了日を含む新しいクエリを実行します。データテーブルajaxが選択したパラメータを投稿してテーブルのデータを再読み込みします

データテーブルajax.reload()は、以下のコードで動作していますが、開始日と終了日の値をajaxフォームのポストに追加することはできません。私はいくつかの異なる構成を試みましたが、どれも成功していませんでした。誰もが、リクエストを再解析して更新された結果をデータテーブルに返すことができるように、サーバにカスタムパラメータを持つajaxリクエストを呼び出すための実用的なソリューションを提案できますか?ありがとう!

//HTML 
<table datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"></table> 

//CONTROLLER 
function dashboardDownloadsCtrl($scope, dataService, DTOptionsBuilder, DTColumnBuilder, DTInstanceFactory, DTRenderer) { 
var vm = this; 
vm.dtInstance = {}; 
vm.dtOptions = DTOptionsBuilder.newOptions() 
.withDOM('<"html5buttons"B>lTfgitp') 
.withOption('ajax', { 
type: 'POST', 
dataSrc: 'data', 
url: dataService.dashboard.downloads.route 
}) 
.withOption('fnPreDrawCallback', function() { console.log('loading..') }) 
.withOption('fnDrawCallback', function() { console.log('stop loading..') }) 
.withOption('processing', true) 
.withOption('serverSide', true) 
.withOption('responsive', true) 
.withPaginationType('full_numbers'); 

vm.dtColumns = [ 
    DTColumnBuilder.newColumn('RowNum').notVisible(), 
    DTColumnBuilder.newColumn('first_name').withTitle('First name'), 
    DTColumnBuilder.newColumn('last_name').withTitle('Last name') 
]; 
} 

// Directive submit button click 
$('button.applyBtn').click(function() { 
var $el = $(this); 
var startDate = $('.daterangepicker_start_input input').val(); 
var endDate = $('.daterangepicker_end_input input').val(); 
//get reference to controller 
var dtVm = scope.$parent.vm; 
var dtInstance = dtVm.dtInstance.DataTable; 
// add start and end date picker values to ajax data source and call reload 
dtVm.dtOptions.ajax.data = function(d) { 
d.datepicker_start_date = startDate; 
d.datepicker_end_date = endDate; 
}; 
var resetPaging = true; 
dtInstance.ajax.reload(function(json){ 
console.log('callback');}, resetPaging); 
}); 

答えて

0

データメソッドの初期化を追加するだけで問題なく動作します。どうやら、これはAjaxリロードコールバックのフィールド値を更新する前に設定する必要があります。

.withOption('ajax', { 
     type: 'POST', 
     dataSrc: 'data', 
     url: dataService.dashboard.downloads.route, 
     data: function (d) { 
      d.datepicker_start_date = $('.daterangepicker_start_input input').val(); 
      d.datepicker_end_date = $('.daterangepicker_end_input input').val(); 
     } 
    }) 
関連する問題