参考:http://datatables.club/example/user_share/send_extra_param.html
下载地址:http://pan.baidu.com/s/1sktUzk5
Moment.js 2.10.6
javascript 日期处理类库
<!--时间插件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', ).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:
},
//起止时间的最大间隔 showDropdowns: true, showWeekNumbers: false, //是否显示第几周 timePicker: true, //是否显示小时和分钟 timePickerIncrement: , //时间的增量,单位为分钟 timePicker24Hour: true, //是否使用24小时制来显示时间
ranges: {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
'上周': [moment().weekday(-6).startOf('day'), moment().weekday(0).endOf('day')],
'上月': [moment().date(-1).date(1).startOf('day'), moment().date(0).endOf('day')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30日': [moment().subtract(29, 'days'), 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:
}
}, 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("?")[]; var param = {}; var strs = data.split("&"); for (var i = ; i < strs.length; i++) { param[strs[i].split("=")[]] = strs[i].split("=")[]; } return
param;
}
}
});