天天看點
傳回

前端常用功能記錄(二)—datatables表格

　　并不是所有的背景開發都有美工和前端工程師來配合做頁面，為了顯示資料并有一定的美感，jQuery的 DataTables

插件對于像我這樣的前端菜鳥來說真是雪中送炭，當然對于專業的前端開發者來說它更是錦上添花！DataTables提供了針對表格的排序、浏覽器分頁、伺服器分頁、篩選、格式化、統計等強大功能。

　　工作中對程式員的學習模式才深有體會，不是從入門到精通，而是從會用到了解。對于我來說，基本都是拿到一個知識先做個東西出來，再來細細品味個中的細節，然後再慢慢了解。從粗到細，從大到小，呵呵，這種"逆向學習"的模式估計也隻在網際網路常見了。

 使用前要引入datatables的相關包：

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

datatables表格展示以及資料源方式都有很多，這裡用的是最常見的後端傳回給前端的json格式的資料源，并且前端html裡指定列的title。

後端的資料可以如下：

app.get('/test/index', function(req, res) {
    var  data = [{name:'xiaojie',age:24,job:'developer',description:'humours'},{},{},{}]; //格式像這樣,資料省略
    res.json({data:data});

});

html裡僅僅聲明一個table的架構：

<table class="table b-t b-light"  id="datatables">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>JOB</th>
          <th>描述</th>
　　　　　  <th>操作</th>  <!--自定義列-->
        </tr>
      </thead>
      <tbody>
      </tbody>
</table>

重頭戲是js，這裡有功能強大的字段，待我慢慢道來。

首先初始化一個datatables，最基本的就這樣：

$(document).ready(function() {
    $('#datatables').dataTable( {

    } );
} );

datatables太強大，記錄起來真是無處下手。 先來看個例子，然後再做詳細介紹：

<script type="text/javascript">
$(document).ready(function() {
    var table = $('#datatables').DataTable({
        "autoWidth": false,
        "paging": true,
        //"dom": 'T<"clear"><"toolbar">Clfrtip',
        "dom": 'iCflrtp',
        "iDisplayLength": 100,
        "lengthMenu": [[100, 500, 1000, -1], [100, 500, 1000, "所有"]],
        "tableTools": {
            "sSwfPath": "/js/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                 {sExtends: "csv", oSelectorOpts: {page: "current" }},
                 "print"],
            "sRowSelect": "os",
        },
        "stateSave": false,
        "processing": true,
        "ajax": {
            'url': "/test/index",
        },
        "order": [
                [0, "asc"], 
                [1, "asc"], 
                [2, "desc"],
            ],
        "columnDefs": [
              {width: '25%', targets: 3},
            ],
        "columns": [{
            "data": "name",
        }, {
            "data": "age",
        }, {
            "data": "job",
        }, {
            "data": "description",
            "visible":false
        }],
        "sPaginationType": "full_numbers",
        "oLanguage": {
            "sProcessing": "<img src='/images/datatable_loading.gif'>  努力加載資料中.",
            "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
            "sZeroRecords": "抱歉， 沒有找到",
            "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條資料",
            "sInfoEmpty": "沒有資料",
            "sInfoFiltered": "(從 _MAX_ 條資料中檢索)",
            "sZeroRecords": "沒有檢索到資料",
            "sSearch": "模糊查詢:  ",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "前一頁",
                "sNext": "後一頁",
                "sLast": "尾頁"
            }
        },
    });

這裡面每個字段都可以說上一番，有些簡單很容易了解，像dom這種就很複雜。

展示的效果表格前面：

前端常用功能記錄(二)—datatables表格

表格底部是分頁：

前端常用功能記錄(二)—datatables表格

然後說明一下每個字段的效果都展現在哪裡

autoWidth

用來啟用或禁用自動列的寬度計算。通常被禁用作為優化（它需要一個有限的時間量來計算的寬度），預設值是true，是以通常将它設為false

分頁paging

指定它才能顯示表格底部的分頁按鈕，如果資料量大的話，這個通常需要設定為true，當然它也與dom的值息息相關，如果dom中沒有指定p這個字元，它即使為true也是無效的。

dom

這個是我認為最複雜也是功能最強大的字段，當然目前我也隻用到了它的冰山一角。

當自定義資料表時，可以根據自身喜好來設定功能元素的預設位置等，可以指定容器，由資料表給出每個HTML控制元件被表示為在domDT選項的單個字元。

dom常用的初始化字元如下：

l - Length changing  選擇每頁顯示行數下拉框的控件
f - Filtering input  搜尋過濾控件
t - The Tabletools    導出excel，csv的按鈕
i - Information  顯示彙總資訊（從 1 到 100 /共 1,288 條資料）
p - Pagination   分頁控件
r - pRocessing   顯示加載時的進度條
C - copy 顯示複制，excel的控件

下面四種是在dom中在自定義的位置植入自定義元素和class

< and > - DIV元素

<"class" and > - DIV和Class

<"#id" and > - DIV和ID

<"#id.class" and > - DIV 和ID 和Class

這些元素的先後順序也決定了對應的控件在表格中顯示的位置。舉個例子：

"dom": 'i<"toolbar">TCflrtp', 則在彙總資訊(i)左邊定義了一個div:toolbar

js如下：

$("div.toolbar").html("<button class='btn btn-primary add_server' ><span>自定義按鈕</span></button>");
        $(".add_server").click(function(){
          location.href ="/server/import"
})

即這是在彙總資訊左邊會出現一個按鈕，點選跳轉到另一個頁面。這種方式可以在一個內建的表格裡植入自定義的東西，非常贊！

對于改變頁面上元素的位置，我還願意多舉幾個例子：

example 1: 簡單的DIV和樣式元素設定

/* Results in: 
    <div class="wrapper"> 
      {filter} 
      {length} 
      {information} 
      {pagination} 
      {table} 
    </div> 
*/  
$('#example').dataTable( {  
  "dom": '<"wrapper"flipt>'  
} );

example 2: 每頁行數p，檢索條件f，分頁p在表格上面，表資訊i在表格下面

/* Results in: 
    <div> 
      {length} 
      {filter} 
      <div> 
        {table} 
      </div> 
      {information} 
      {pagination} 
    </div> 
*/  
$('#example').dataTable( {  
  "dom": '<lf<t>ip>'  
} );

example 3: 表資訊i在表上面，檢索條件f，每頁行數p，進行中r在表下面，并且有清除元素

/* Results in: 
    <div class="top"> 
      {information} 
    </div> 
    {processing} 
    {table} 
    <div class="bottom"> 
      {filter} 
      {length} 
      {pagination} 
    </div> 
    <div class="clear"></div> 
*/  
$('#example').dataTable( {  
  "dom": '<"top"i>rt<"bottom"flp><"clear">'  
} );

iDisplayLength和lengthMenu

這兩個元素是和dom的l字元對應的，

"iDisplayLength": 100,   ------表示預設1頁是100行資料

"lengthMenu": [[100, 500, 1000, -1], [100, 500, 1000, "所有"]],  -------自定義每頁顯示的行數，

iDisplayLength預設是10行，lengthMenu預設是[[10 25 50 100], [10 25 50 100]]

前端常用功能記錄(二)—datatables表格

tableTools

這個也有很多參數，這裡隻寫了常見的。swf可以導出為csv,pdf,xls三種檔案，若需要一種，可以在aButtons中指定

"tableTools": {
   "sSwfPath": "/js/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
   "aButtons": [
      {sExtends: "csv", oSelectorOpts: {page: "current" },sFileName: "test.csv", //導出為csv檔案，并且指定了檔案的名稱
      },
      "print", //列印控件
      "sRowSelect": "os",
},

對應的表格控件為：

前端常用功能記錄(二)—datatables表格

stateSave

如果設定為true這個是儲存目前使用者的狀态的，比如使用者選擇目前每頁顯示500行，那麼他重新刷頁面這個不是預設的100行，而是記錄了使用者的行為顯示500行。

processing

這個對應dom中的r，即加載資料時顯示的進度，這個一般都設定為true，不然資料量大的話使用者可能等上幾秒卻不知怎麼回事，顯示的控件如下：

前端常用功能記錄(二)—datatables表格

ajax

即後端傳來的資料，如果按照上述傳來的資料格式的話，則下面的url就是後端指定的url:

"ajax": {
            'url': "/test/index",
        },

order

排序，這個可以對單列排序，可以按照指定的順序，先按哪列排序再按哪列排序

"order": [
                [0, "asc"], 
                [1, "asc"], 
                [2, "desc"],
            ],
//表示先對第1列進行升序排序，再按照第二列升序排序，最後按照第三列降序排序

columnDefs

這個字段可以對列進行很多操作，這個字段也很複雜，功能強大

"columnDefs": [
              {width: '25%', targets: 3},
            ],

上面舉的例子的意思是對第四列的寬度設定占所有列寬度的25%，它還有很強大的功能，如改變某列元素的屬性，增加列等，如下：

"columnDefs": [
                  // 将name列變為紅色
                  {
                      "targets": [0], // 目标列位置，下标從0開始
                      "data": "name", // 資料列名
                      "render": function(data, type, full) { // 傳回自定義内容
                          return "<span style='color:red;'>" + data + "</span>";
                      }
                  },
                  // 增加一列，包括删除和修改，同時将需要傳遞的資料傳遞到連結中
                  {
                      "targets": [4], // 目标列位置，下标從0開始
                      "data": "name", // 資料列名
                      "render": function(data, type, full) { // 傳回自定義内容
                          return "<a href='/delete?name=" + data + "'>删除</a>&nbsp;<a href='/update?name=" + data + "'>更新</a>";
                      }
                  }
              ]      
columns
這個指定了傳過來的資料的字段，visible字段預設是true，如果設定false的話，顯示的時候是隐藏的，當然也可以通過空間取消其隐藏。
前端常用功能記錄(二)—datatables表格

sPaginationType (pagingType)

sPaginationType: 分頁樣式，支援四種内置方式，simple、simple_numbers、full和 full_numbers, 預設使用 simple_numbers。即下面四種方式：

simple: 'Previous' and 'Next' buttons only

前端常用功能記錄(二)—datatables表格

simple_numbers: 'Previous' and 'Next' buttons, plus page numbers

前端常用功能記錄(二)—datatables表格

full: 'First', 'Previous', 'Next' and 'Last' buttons

前端常用功能記錄(二)—datatables表格

full_numbers: 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers

前端常用功能記錄(二)—datatables表格

oLanguage

資料表的語言設定，預設都是英文的，可以通過修改下面源碼的字段來修改成中文，更可以改為喜歡的展現方式。

另外有點想說明下，開始對于這些個字段的命名不太了解，原來第一個小寫字母表示它接受參數的類型。

a: array   s:string   o:object

"oLanguage": {
            "sProcessing": "<img src='/images/datatable_loading.gif'>  努力加載資料中.",
            "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
            "sZeroRecords": "抱歉， 沒有找到",
            "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條資料",
            "sInfoEmpty": "沒有資料",
            "sInfoFiltered": "(從 _MAX_ 條資料中檢索)",
            "sZeroRecords": "沒有檢索到資料",
            "sSearch": "模糊查詢:  ",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "前一頁",
                "sNext": "後一頁",
                "sLast": "尾頁"
            }
        },

rowCallback

還有一個常用的是rowCallback，當建立了行，但還未繪制到螢幕上的時候調用，通常用于改變行的class風格。比如為列為IP的這一行加個超連結，代碼接着上面的：

"rowCallback": function(row, data) { //data是後端傳回的資料
    if(data.ip) {
      $('td:eq(3)', row).html('<a target="_blank" href=http://' + data.ip + '>' + data.ip + '</a>');
    }
},

//$('td:eq(3)', row)表示選中第四列的元素

則這樣的話第四列的IP隻要不為空值則都連結到自己的頁面。

datatables實在太強大，太友善，我這裡說的仍然是冰山一角，下面附錄是摘自網上，常用的屬性和方法

要注意的是，要被dataTable處理的table對象，必須有thead與tbody，而且，結構要規整（資料不一定要完整），這樣才能正确處理。

以下是在進行dataTable綁定處理時候可以附加的參數： 

屬性名稱 取值範圍 解釋
bAutoWidth true or false, default true 是否自動計算表格各列寬度
bDeferRender true or false, default false 用于渲染的一個參數
bFilter 開關，是否啟用用戶端過濾功能
bInfo 開關，是否顯示表格的一些資訊
bJQueryUI 是否使用jquery ui themeroller的風格
bLengthChange 開關，是否顯示一個每頁長度的選擇條（需要分頁器支援）
bPaginate 開關，是否顯示（使用）分頁器
bProcessing true or false, defualt false 開關，以指定當正在處理資料的時候，是否顯示“正在處理”這個提示資訊
bScrollInfinite 開關，以指定是否無限滾動（與sScrollY配合使用），在大資料量的時候很有用。當這個标志為true的時候，分頁器就預設關閉
bSort 開關，是否讓各列具有按列排序功能
bSortClasses 開關，指定當目前列在排序時，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，打開後，在處理大資料時，性能有所損失
bStateSave 開關，是否打開用戶端狀态記錄功能。這個資料是記錄在cookies中的，打開了這個記錄後，即使重新整理一次頁面，或重新打開浏覽器，之前的狀态都是儲存下來的
sScrollX 'disabled' or  '100%' 類似的字元串 是否開啟水準滾動，以及指定滾動區域大小
sScrollY 'disabled' or '200px' 類似的字元串 是否開啟垂直滾動，以及指定滾動區域大小
--
選項
aaSorting array array[int,string], 如[], [[0,'asc'], [0,'desc']] 指定按多列資料排序的依據
aaSortingFixed 同上 同上。唯一不同點是不能被使用者的自定義配置沖突
aLengthMenu default [10, 25, 50, 100]，可以為一維數組，也可為二維數組，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]] 這個為選擇每頁的條目數，當使用一個二維數組時，二維層面隻能有兩個元素，第一個為顯示每頁條目數的選項，第二個是關于這些選項的解釋
aoSearchCols default null, 類似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] 給每個列單獨定義其初始化搜尋清單特性（這一塊還沒搞懂）
asStripClasses default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] 指定要被應用到各行的class風格，會自動循環
bDestroy 用于當要在同一個元素上執行新的dataTable綁定時，将之前的那個資料對象清除掉，換以新的對象設定
bRetrieve 用于指明當執行dataTable綁定時，是否傳回DataTable對象
bScrollCollapse 指定适當的時候縮起滾動視圖
bSortCellsTop （未知的東東）
iCookieDuration 整數，預設7200，機關為秒 指定用于存儲用戶端資訊到cookie中的時間長度，超過這個時間後，自動過期
iDeferLoading 整數，預設為null 延遲加載，它的參數為要加載條目的數目，通常與bServerSide，sAjaxSource等配合使用
iDisplayLength 整數，預設為10 用于指定一屏顯示的條數，需開啟分頁器
iDisplayStart 整數，預設為0 用于指定從哪一條資料開始顯示到表格中去
iScrollLoadGap 整數，預設為100 用于指定當DataTable設定為滾動時，最多可以一屏顯示多少條資料
oSearch 預設{ "sSearch": "", "bRegex": false, "bSmart": true } 又是初始時指定搜尋參數相關的，有點複雜，沒搞懂目前
sAjaxDataProp 字元串，default 'aaData' 指定當從服務端擷取表格資料時，資料項使用的名字
sAjaxSource URL字元串，default null 指定要從哪個URL擷取資料
sCookiePrefix 字元串，default 'SpryMedia_DataTables_' 當打開狀态存儲特性後，用于指定存儲在cookies中的字元串的字首名字
sDom default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 這是用于定義DataTable布局的一個強大的屬性，另開專門文檔來補充說明吧
sPaginationType 'full_numbers' or 'two_button', default 'two_button' 用于指定分頁器風格
sScrollXInner string default 'disabled' 又是水準滾動相關的，沒搞懂啥意思

DataTable支援如下回調函數  

回調函數名稱 參數 傳回值 預設 功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set string: cookie formatted string (which should be encoded by using encodeURIComponent()) null 當每次cookies改變時，會觸發這個函數調用
fnDrawCallback 無 在每次table被draw完後調用，至于做什麼就看着辦吧
fnFooterCallback 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次重畫的時候修改表格的腳部
fnFormatNumber 1.int : number to be formatted String : formatted string for DataTables to show the number 有預設的 用于在大數字上，自動加入一些逗号，分隔開
fnHeaderCallback 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次draw發生時，修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules string: The string to be displayed in the information element. 用于傳達table資訊
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成後調用
fnPreDrawCallback Boolean 用于在開始繪制之前調用，傳回false的話，會阻止draw事件發生；傳回其它值，draw可以順利執行
fnRowCallback 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : "TR" element for the current row 當建立了行，但還未繪制到螢幕上的時候調用，通常用于改變行的class風格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用于替換預設發到服務端的請求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded, true otherwise 在cookies中的資料被加載前執行，可以友善地修改這些資料
fnStateSaveCallback 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. String - the full string that should be used to save the state 在狀态資料被存儲到cookies前執行，可以友善地做一些預操作

from http://www.cnblogs.com/zhoujie

作者：

zhoujie

出處：

http://www.cnblogs.com/zhoujie/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，不然我擔心部落格園找你算賬

如果您覺得本文對你有幫助，請豎起您的大拇指右下角點推薦，也可以關注我

存儲 javascript 前端開發 資料格式 datatables表格 datatables使用插件 datatables插件 datatables表格設定 datatables使用插件無效
上一篇: 吳恩達《深度學習》第一門課（4）深層神經網絡
下一篇: Windows環境下，将Django部署到Apache Web Server

繼續閱讀