データテーブルインスタンスをロードするために、データテーブル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);
});