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; 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="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(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: 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;
            }
        }
    });