Javascript 数据表ajax发布用户选择的参数并重新加载表数据
我使用角度数据表(0.5.2)和数据表1.10.12来加载数据表实例。在UI中,我提供了一个日期选择器(开始和结束日期),供用户选择,以便按日期范围限制数据。当用户单击submit按钮时,我的计划是将Data Tables ajax请求发送回服务器,以执行新的查询,包括开始和结束日期 我在下面的代码中使用了数据表ajax.reload(),但是,我无法将开始日期和结束日期值添加到ajax表单post中。我尝试了几种不同的配置,但都不起作用。有谁能建议一个可行的解决方案,只需向服务器调用带有自定义参数的ajax请求,这样服务器就可以重新处理请求并将更新后的结果发送回数据表?谢谢Javascript 数据表ajax发布用户选择的参数并重新加载表数据,javascript,datatables-1.10,angular-datatables,Javascript,Datatables 1.10,Angular Datatables,我使用角度数据表(0.5.2)和数据表1.10.12来加载数据表实例。在UI中,我提供了一个日期选择器(开始和结束日期),供用户选择,以便按日期范围限制数据。当用户单击submit按钮时,我的计划是将Data Tables ajax请求发送回服务器,以执行新的查询,包括开始和结束日期 我在下面的代码中使用了数据表ajax.reload(),但是,我无法将开始日期和结束日期值添加到ajax表单post中。我尝试了几种不同的配置,但都不起作用。有谁能建议一个可行的解决方案,只需向服务器调用带有自定义
//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);
});
//HTML
//控制器
函数仪表板下载SCTRL($scope、dataService、DTOptionsBuilder、DTColumnBuilder、DTInstanceFactory、DTRenderer){
var vm=这个;
vm.dtInstance={};
vm.dtOptions=DTOptionsBuilder.newOptions()
.withDOM('lTfgitp'))
.withOption('ajax'{
键入:“POST”,
dataSrc:'数据',
url:dataService.dashboard.downloads.route
})
.withOption('fnPreDrawCallback',函数(){console.log('loading..')})
.withOption('fnDrawCallback',函数(){console.log('stop loading..')})
.withOption('processing',true)
.withOption('serverSide',true)
.withOption('responsive',true)
.WithingPaginationType(“完整编号”);
vm.dtColumns=[
DTColumnBuilder.newColumn('RowNum').notVisible(),
DTColumnBuilder.newColumn('first_name')。with title('first name'),
DTColumnBuilder.newColumn('last_name')。withTitle('last name'))
];
}
//指令提交按钮点击
$('button.applyBtn')。单击(函数(){
var$el=$(本);
var startDate=$('.daterangepicker_start_input').val();
var endDate=$('.daterangepicker_end_input').val();
//获取对控制器的引用
var dtVm=范围$parent.vm;
var dtInstance=dtVm.dtInstance.DataTable;
//将开始和结束日期选择器值添加到ajax数据源并调用重载
dtVm.dtOptions.ajax.data=函数(d){
d、 日期选择器\开始\日期=开始日期;
d、 日期选择器\结束\日期=结束日期;
};
var=true;
重载(函数(json){
log('callback');},resetPaging);
});
我通过简单地添加数据方法初始化来实现它。显然,这必须在更新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();
}
})