jQuery-DataTables插件

時間 2019-11-11

原文原文鏈接

下載DataTables插件
HTML部分：
   1.自定義搜索框
   物料名稱:<input type="text" id="ma_name" >數量:<input type="text" id="min" >——<input type="text" id="max" >

   2.定義table，使用js生成DataTable
   <table id="example" class="display" cellspacing="0" width="100%">
       <thead>
       <tr>
           <th>物料名稱</th>
           <th>數量</th>
           <th>日期</th>
           <th>物料是否齊全</th>
           <th>操做</th>
       </tr>
       </thead>
   </table>
js部分：
   var table=null;
   //自定義過濾功能，將在第某列中搜索兩個值之間的數據
   $.fn.dataTable.ext.search.push(
       function( settings, data, dataIndex ) {
           var min = parseInt( $('#min').val(), 10 );//10進制數
           var max = parseInt( $('#max').val(), 10 );
           var ma_num = parseFloat( data[1] ) || 0; // use data for the ma_num column

           if ( ( isNaN( min ) && isNaN( max ) ) || ( isNaN( min ) && ma_num <= max ) || ( min <= ma_num && isNaN( max ) ) ||( min <= ma_num && ma_num <= max ) ){
               return true;
           }
           return false;
       }
   );

   //日期處理
   Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小時
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
       if (/(y+)/.test(fmt)) {
           fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
       }
       for (var k in o) {
           if (new RegExp("(" + k + ")").test(fmt)) {
               fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
           }
       }
       return fmt;
   }

   $(function () {
        //table模塊
        table=$('#example').DataTable({
           "serverSide": true,//設置服務器端實現分頁
            "searching": false,//關閉自動搜索功能
           "ajax": {
               "url":"${basePath}/wa/wm/listMateriel?t=" + Math.random(),
               "type": "POST",
               "data": function(d) {//傳遞服務器端數據
                      d.pageNum = d.start/d.length+1;
                    d.pageSize = d.length;
                    d.sortSql = d.columns[d.order[0]["column"]].data+" "+d.order[0]["dir"];//ma_senddate desc
                    d.ma_name=$("#ma_name").val();//獲取自定義搜索框值
                   d.num_min=$("#num_min").val();
                   d.num_max=$("#num_max").val();
               }
            },
            "oLanguage": { // 國際化配置
                "sProcessing": "正在獲取數據，請稍後...",
                "sLengthMenu": "顯示 _MENU_ 條",
                "sZeroRecords": "沒有找到數據",
                "sInfo": "從 _START_ 到 _END_ 條記錄總記錄數爲 _TOTAL_ 條",
                "sInfoEmpty": "記錄數爲0",
                "sInfoFiltered": "(所有記錄數 _MAX_ 條)",
                "sInfoPostFix": "",
                "sSearch": "配件名稱搜索",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "第一頁",
                    "sPrevious": "上一頁",
                    "sNext": "下一頁",
                    "sLast": "最後一頁"
                }
            },
            "columns": [{
                "data": "ma_name"
           },{
                "data": "ma_num"
            },{
                "data": "ma_date",
                render: function(data) {
                   if(''!=data && null !=data){
                       return (new Date(data)).Format("yyyy-MM-dd");
                   }else{//數據沒有時手動設置空，不然顯示‘1970-01-01’
                       return '';
                   }
                }
           },{
               "data": "ppFull",//接收值顯示多選框
                render : function(data){
                   if(1==data){
                       return ("<input type='checkbox' checked disabled>");
                   }else{
                       return ("<input type='checkbox' disabled>");
                   }
                }
            },{
                "data": function(obj){//接收json中status和id值
                   if(4 == obj.status){
                       return "<a href='#' onclick='aaa(\""+obj.id+"\");'>發貨</a>";
                   }else{
                       return "<a href='#' onclick='bbb(\""+obj.id+"\");'>收貨</a>";
                   }
                }
            }],ajax

　　　　 //默認按照第3列倒序排序
            "aaSorting": [
               [2, "desc" ]
            ],
            columnDefs: [{
               "sortable":false,"targets":[4]//第5列不參加排序
            }]
        });
       //自定義搜索框監聽器，刷新頁面數據
        $('#ma_name,#min,#max').keyup(function() {
            table.ajax.reload( null, true );
        });
    });json