博主是一個java後端程序員小白,前端技術會用但不精通,做後臺的一些功能經常要涉及表格的展示,分頁,搜索,排序等等一系列功能,在經歷了一段時間的原始手段,開始接觸並使用Datatables,一個jquery表格插件,上手很快,重點是超級好用,有完善的中文文檔,今天有空,整理一下Datatable的一些使用方法及註意事項,以便隨時查閱.

DataTables支持的功能:

　　1.分頁,只需要返回符合規範的數據類型,Datatable能幫我們實現好用的分頁,同時支持排序,和即時搜索.

　　2.豐富的數據源的支持

　　3,支持國際化,支持多種主題.

快速使用

　　1.使用Datatables非常簡單,只需要引入一個css樣式文件和一個js腳本文件,即可,官網提供了文件的cdn地址可直接引用.

　　CSS: //cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

　　JS: //cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

　　2.js中,使用一下簡單的幾行代碼,就能初始化datatables風格的表格樣式,並使用Datatable提供的豐富功能.

1 $(document).ready(function(){
2         $(‘#myTable‘).DataTable();
3     });

　　html頁面中的table標簽定義一個id,比如id="myTable".

豐富配置項

　　以上就可以實現基本風格的datatables樣式,datatables默認情況下已啟用一些功能,比如搜索,排序,分頁,要想更加自由的控制樣式,我們需要更詳細的配置.

DOM定位

　　dom定位可以實現你自由的布局 分頁,搜索框等等這些組件,以下是一些組件以及字符縮寫.

• l - Length changing 每頁顯示多少條數據選項
• f - Filtering input 搜索框
• t - The Table 表格
• i - Information 表格信息
• p - Pagination 分頁按鈕
• r - pRocessing 加載等待顯示信息

　　如果我們使用下面的代碼來控制樣式,表示 i顯示在top(頂部),flp顯示在bottom(底部).這樣就可以自定義組件位置了.

$(‘#example‘).dataTable( {
        "dom": ‘<"top"i>rt<"bottom"flp><"clear">‘
    } );

國際化配置

　　datatables使用的語言選項可以通過language來配置,語言配置作為初始化配置的一部分,可以通過一下配置來自定義頁面各個地方的顯示文本.　　

$(‘#example‘).DataTable({
    language: {
        "sProcessing": "處理中...",
        "sLengthMenu": "顯示 _MENU_ 項結果",
        "sZeroRecords": "沒有匹配結果",
        "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
        "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
        "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中數據為空",
        "sLoadingRecords": "載入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首頁",
            "sPrevious": "上頁",
            "sNext": "下頁",
            "sLast": "末頁"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});

限制水平寬度/垂直高度

　　如果需要在一個定寬或者定高的table裏展示數據,為了能夠展示所有的數據,就要限制寬度,或高度,使用垂直或水平滾動條,在Datatable中使用如下配置:

$(document).ready(function() {
  $(‘#example‘).dataTable( {
    //開啟水平滾動條
    "scrollX": true
    //設置固定高度為200px 數據量溢出時出現滾動條
    "scrollY": "200px",
    "scrollCollapse": "true",
     //不啟用分頁(展示所有)
     "paging": "false"
  } );
} );

其他配置功能:

$(document).ready(function() {
  $(‘#example‘).dataTable( {
    //禁用分頁
    "paging":   false,
    //禁用排序
    "ordering": false,
    //禁用本地搜索
    "searching":false,
    //開啟選擇每頁顯示多少記錄的下拉框 如果pageing配置為false,此配置會自動置為false
     "lengthChange":true,
     //是否顯示正在處理的狀態。開啟後在數據加載過程中,會有正在加載狀態
     "processing": "true"
    //是否顯示正在處理的狀態。開啟後在數據加載過程中,會有正在加載狀態,在處理耗時數據時比較有用
     "processing": "true"
     //開啟延遲渲染,假設加載1000條數到表格.每頁顯示10條,開啟後datatables只會創建10個節點,即根據分頁的生命周期來創建行
     "deferRender": true
      //禁用自動列寬的計算,如果以自定義列寬,建議禁用,因為此操作會耗費一些額外時間計算列寬
      "autoWidth": false,
      //禁用狀態保存 開啟後再次加載頁面表格狀態會被設成之前的狀態
      "stateSave" : false,
  } );
} );

數據源

　　這裏主要講解ajax獲取對象數據

$(document).ready(function() {
    $(‘#example‘).DataTable( {
//ajax可以接收string,object,fucntion 
        "ajax": {
                //type url 不需多說
                "type": "POST",
                "url":$(‘#game_detail_data‘).attr("data-url"),
                //從服務器獲得json數據,使用dataSrc屬性把data改為aodata
                "dataSrc": "aoData",
               //請求參數,添加額外的參數發送到服務器 接受一個fucntion
                "data":function(d){
                    d.pageType=‘DETAIL‘;
                    d.channelName=$("#channelname").val().trim();
                    d.tag=$("#tag").val();
                    d.startTime=$("#startTime").val();
                    d.endTime=$("#endTime").val();
                }
            },
       //返回數據是對象列表的時候需要使用如下方式與列名一一對應好
        "columns": [
            { "data": "name" },
            { "data": "age" },
            { "data": "sex",
       //渲染數據顯示在表格中,render可以讓你在table顯示非常多樣化的格式
　　　　　　　　"render" : function(data, type, full, meta) {
    　　　　　　　　　　if(data==‘boy‘){
      　　　　　　　　　　  data ="男";
  　　　　　　　　　　  }else{
      　　　　　　　　　　  data ="女";
   　　　　              }
                   return  data;
}},
 },
            { "data": "phone" },
            { "data": "address" },
            { "data": "salary" }
        ]
    } );
} );

回調函數

　　datatable支持在數據初始化的各個時機進行一些自定義操作,下面說兩個比較常用的:

$(‘#example‘).dataTable( {
//數據初始化表格繪制成功後調用此函數
  "initComplete": function() {
    alert( ‘初始化以後調用‘ );
  }
//每次表格重繪的時候都調用這個函數
"drawCallback": function( settings ) {
        alert( ‘每次表格重繪時調用‘ );
    }
} );

參考文檔

　　Datatables官方文檔

Datatables快速入門開發--一款好用的JQuery表格插件