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

参考：http://datatables.club/example/user_share/send_extra_param.html

下载地址：http://pan.baidu.com/s/1sktUzk5

Moment.js 2.10.6

javascript 日期处理类库

http://momentjs.cn/

<!--时间插件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;

            }

        }

    });

秒客网

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

Moment.js 2.10.6

相关文章