Datatables快速入門開發--一款好用的JQuery表格外掛程式

標籤：reference   通過   time   tail   bsp   res   empty   限制   mat   

　　博主是一個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表格外掛程式