Jquery.Datatables 结合时间段查询，daterangepicker实现Datatables表格带参数查询

<!--时间插件daterangepicker验证 -->

<script src="~/assets/bootstrap-daterangepicker-master/moment.js"></script>
<script src="~/assets/bootstrap-daterangepicker-master/daterangepicker.js"></script>
<link href="~/assets/bootstrap-daterangepicker-master/daterangepicker.css" rel="stylesheet" />
<link href="~/assets/bootstrap-daterangepicker-master/daterangepicker-1.3.7.css" rel="stylesheet" />

//创建datatables
var tables = $('#dataTables-example').DataTable({
buttons: [{ extend: 'copy', text: 'Copy' }, { extend: 'excel', text: 'Excel' }, 'print'],
"sPaginationType": "full_numbers",
//"autoWidth": true,//自适应宽度
"jQueryUI": true,
"searching": true,//关闭搜索框
responsive: true,
"processing": true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
"bSort": false, //是否支持排序功能
"cell-border": true,
//多语言配置
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoEmtpy": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
"sProcessing": "正在加载中...",
"sSearch": "搜索",
"sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
},
"ajax": {
"type": "post",
"url": '/OrderAll/GetOrderList',
"data": function (d) {
//添加额外的参数传给服务器
d.extra_search = $('#reportrange span').html();
d.oa_state = $('#oastate').val();
},
},

……省略……

//初始化结束后的回调函数
initComplete: function () {
//状态选择
$("#mytool").append('<select class="form-control" id="oastate" style="float:left; width:105px"><option>所有</option><option>未出货</option><option>已出货</option><option>已退款</option></select> ');

//筛选按钮
//$("#mytool").append('<button type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" id="excel">excel</button>');

//时间选择
var dataPlugin =
'<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> ' +
'日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> ' +
'<span id="searchDateRange"></span>  ' +
'<b class="caret"></b></div> ';
$('#mytool').append(dataPlugin);

$('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));

$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012',    //最小时间
maxDate: moment(), //最大时间
dateLimit: {
days: 30
}, //起止时间的最大间隔
showDropdowns: true,
showWeekNumbers: false, //是否显示第几周
timePicker: true, //是否显示小时和分钟
timePickerIncrement: 60, //时间的增量，单位为分钟
timePicker24Hour: true, //是否使用24小时制来显示时间

ranges: {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'上周': [moment().weekday(-6).startOf('day'), moment().weekday(0).endOf('day')],

  '上月': [moment().dates(-1).dates(1).startOf('day'), moment().dates(0).endOf('day')],

'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()]
},
opens: 'right', //日期选择框的弹出位置
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary blue',
cancelClass: 'btn-small',
format: 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
separator: ' to ',
locale: {
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
}
}, function (start, end, label) {//格式化日期显示框

$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});

//设置日期菜单被选项  --开始--
var dateOption;
if ("${riqi}" == 'day') {
dateOption = "今日";
} else if ("${riqi}" == 'yday') {
dateOption = "昨日";
} else if ("${riqi}" == 'week') {
dateOption = "最近7日";
} else if ("${riqi}" == 'month') {
dateOption = "最近30日";
} else if ("${riqi}" == 'year') {
dateOption = "最近一年";
} else {
dateOption = "自定义";
}
$(".daterangepicker").find("li").each(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
if (dateOption == $(this).html()) {
$(this).addClass("active");
}
});
//设置日期菜单被选项  --结束--

//选择时间后触发重新加载的方法
$("#reportrange").on('apply.daterangepicker', function () {
//当选择时间后，出发dt的重新加载数据的方法
table.ajax.reload();
//获取dt请求参数
var args = table.ajax.params();
console.log("额外传到后台的参数值extra_search为：" + args.extra_search);
console.log("额外传到后台的参数值oa_state为：" + args.oa_state);
});

//选择订单状态后触发重新加载的方法
$("#oastate").change(function () {
//当选择时间后，出发dt的重新加载数据的方法
table.ajax.reload();
//获取dt请求参数
var args = table.ajax.params();
console.log("额外传到后台的参数值extra_search为：" + args.extra_search);
console.log("额外传到后台的参数值oa_state为：" + args.oa_state);
});

function getParam(url) {
var data = decodeURI(url).split("?")[1];
var param = {};
var strs = data.split("&");

for (var i = 0; i < strs.length; i++) {
param[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
return param;
}
}
});