Data tables ajax post 用户选择的参数并重新加载 table 数据

Question

我正在使用 Angular Data Tables (0.5.2) 和 DataTables 1.10.12 来加载 Data Table 实例。在 UI 中，我为用户 select 提供了一个 DatePicker（开始和结束日期），以便按日期范围限制数据。当用户单击提交按钮时，我的计划是将数据 Tables ajax 请求发送回服务器以执行包括开始日期和结束日期的新查询。

我有数据 Tables ajax.reload() 在下面的代码中工作，但是，我无法将开始和结束日期值添加到 ajax 表单 post。我尝试了几种不同的配置，但 none 有效。任何人都可以建议一个工作解决方案来简单地向服务器调用带有自定义参数的 ajax 请求，以便它可以重新处理请求并将更新的结果发送回 Data Tables 吗？谢谢！

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

Answer 1

我通过简单地添加数据方法初始化来让它工作。显然，这必须在您更新 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();
        }
    })

Data tables ajax post 用户选择的参数并重新加载 table 数据

Data tables ajax post user selected parameters and reload table data

javascript

datatables-1.10

angular-datatables