datatable 參數設置

官方地址 https://datatables.net/examples/index


1. 需要引用<script src="js/jquery.dataTables.js"></script>。如果用到css 也需要引用css

 

2.頁面內容

  <table id="example" class="table table-striped table-bordered"> 
					    <thead> 
					     <tr> 
					      
					      <th>日期</th> 
					      <th>產品</th> 
					      <th>數據來源</th> 
					      <th>數據類型</th> 
					     </tr> 
					    </thead> 
					    <tbody></tbody> 
					    <tfoot>
					    	<th>日期</th>
					    	<th>產品</th>
					    	<th>數據來源</th>
					    	<th>數據類型</th>
					    </tfoot>
					    <!-- tfoot是搜索 --> 
					    <!-- tbody是必須的 --> 
					   </table> 

3.js 調用

$(document).ready(function() {
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        //獲取內容顯示在輸入框placeholder
 
        $(this).html( '<input type="text" class="form-control" placeholder="'+title+'" />' );
    } );

     var table=$('#example').DataTable( {
        data: data,//放入數據
        "searching": true,//是否支持搜索
        autoFill: true,
        bAutoWidth : true,
        "language": {
            "search": " ",
             sZeroRecords : "沒有您要搜索的內容",
             oPaginate: {    
                    "sFirst" : "第一頁",    
                    "sPrevious" : "上一頁",    
                    "sNext" : "下一頁",    
                    "sLast" : "最后一頁"    
                },
            searchPlaceholder: "過濾..."
          },
        "pagingType": "full_numbers",
        "info": false,//是否顯示頁腳信息
       
       pageLength: 4,//顯示個數table
//對應沒列顯示的數據
    columns: [
    {
        "data": "name"
    },
    {
        "data": "position"
    },
    {
        "data": "salary"
    },{
        "data": "url"
    }]
 
    } );

    table.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
})

效果（用的是bootstrap樣式）

 

DataTable  參數  參考

"bProcessing" : true, //DataTables載入數據時，是否顯示‘進度’提示  
            "bServerSide" : true, //是否啟動服務器端數據導入  
            "bStateSave" : true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設

定回復為初始化狀態  
            "bJQueryUI" : true, //是否使用 jQury的UI theme  
            "sScrollY" : 450, //DataTables的高  
            "sScrollX" : 820, //DataTables的寬  
            "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項  
            "iDisplayLength" : 40, //默認顯示的記錄數  
            "bAutoWidth" : false, //是否自適應寬度  
            //"bScrollInfinite" : false, //是否啟動初始化滾動條  
            "bScrollCollapse" : true, //是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時

候，插件高度是否隨數據條數而改變  
            "bPaginate" : true, //是否顯示（應用）分頁器  
            "bInfo" : true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數  
            "sPaginationType" : "full_numbers", //詳細分頁組，可以支持直接跳轉到某頁  
            "bSort" : true, //是否啟動各個字段的排序功能  
            "aaSorting" : [[1, "asc"]], //默認的排序方式，第2列，升序排列  
            "bFilter" : true, //是否啟動過濾、搜索功能  
 "oLanguage": { //國際化配置  
                "sProcessing" : "正在獲取數據，請稍后...",    
                "sLengthMenu" : "顯示 _MENU_ 條",    
                "sZeroRecords" : "沒有您要搜索的內容",    
                "sInfo" : "從 _START_ 到  _END_ 條記錄 總記錄數為 _TOTAL_ 條",    
                "sInfoEmpty" : "記錄數為0",    
                "sInfoFiltered" : "(全部記錄數 _MAX_ 條)",    
                "sInfoPostFix" : "",    
                "sSearch" : "搜索",    
                "sUrl" : "",    
                "oPaginate": {    
                    "sFirst" : "第一頁",    
                    "sPrevious" : "上一頁",    
                    "sNext" : "下一頁",    
                    "sLast" : "最后一頁"    
                }  
            }

官方地址https://datatables.net/examples/index