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', 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; } }
    });