快捷導(dǎo)航

jQuery表格插件datatables用法匯總

更新時(shí)間：2016年03月29日 17:01:24 作者：JisaKun

這篇文章主要介紹了jQuery表格插件datatables用法匯總，DataTables是一個(gè)非常強(qiáng)大的表格插件，感興趣的小伙伴們可以參考一下

DataTables是一個(gè)jQuery的表格插件，本文為大家分享了表格插件datatables用法，介紹了基礎(chǔ)的部分知識(shí)，具體內(nèi)容如下

一、初始化
在頁(yè)面中

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" >
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" class="display">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Row 1 Data 1</td>
   <td>Row 1 Data 2</td>
  </tr>
  <tr>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</td>
  </tr>
 </tbody>
</table>
 </body>
</html>

js中初始化

$(document).ready( function () {
 $('#table_id').DataTable();
} );

二、常用配置
在初始化的時(shí)候可以通過(guò)一些常用的配置項(xiàng)對(duì)表格進(jìn)行配置，這是我在項(xiàng)目中實(shí)際用到的

$("#vivo_table_list").dataTable({
   pageLength: 10,  //更改初始頁(yè)面長(zhǎng)度 （每頁(yè)的行數(shù)）
   processing: true, //顯示正在處理字符串
   serverSide: false, // 服務(wù)器模式，這一點(diǎn)非常奇怪*
   ordering: true,   // 是否啟用Datatables排序
   searching: false,  // 開(kāi)啟搜索
   autoWidth: false,
   zeroRecords: "沒(méi)有查詢(xún)數(shù)據(jù)",
   destroy: true,   // 從當(dāng)前上下文銷(xiāo)毀掉Datatables對(duì)象 (妹搞懂)
   pagingType: "input", // 分頁(yè)按鈕種類(lèi)顯示選項(xiàng)
   language: {
    url: "cn.txt" // 本地化
   },
   dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么順序定義表的控制元素在頁(yè)面上出現(xiàn)(妹搞懂)
   ajax: {
    url: "/url",
    type: "post", // ajax請(qǐng)求的類(lèi)型 **
    data: function () {
     return that.getQueryParams(); // ajax的參數(shù)
    }
   },
   columns: [
    {title: "id", data: "id", orderable: true},
    {title: "uid", data: "uid", orderable: false},
    {title: "昵稱(chēng)", data: "nick", orderable: false},
    {title: "姓名", data: "name", orderable: false},
    {title: "電話", data: "tel", orderable: false},
    {title: "申請(qǐng)時(shí)間", data: "stimeshow", orderable: true},
    {title: "狀態(tài)", data: "statshow", orderable: false},
    {
     title: "操作", orderable: false, render: function (data,type,full) {
     return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="hidden" value="'+full.id+'"/>';
    }
    }
   ]
  });

后臺(tái)傳回的數(shù)據(jù)一定要是一個(gè)map，key是 "data"，value 是數(shù)據(jù)（如果數(shù)據(jù)是List要 toArray()），其中 data 也是 DataTables 的參數(shù)之一，表示表格要顯示的數(shù)據(jù)，所以你可以在這個(gè)map中放上其他的表格參數(shù)，只要把key設(shè)置為參數(shù)名就可以了。

*：配置中serverSide開(kāi)啟服務(wù)器模式，在工作使用中表格的數(shù)據(jù)是通過(guò)ajax從后臺(tái)獲取，就理所當(dāng)然地打開(kāi)了這個(gè)模式，但是表格對(duì)某一列排序的功能就失效了，而隨后我關(guān)閉了這一模式，發(fā)現(xiàn)就可以對(duì)表格中的列進(jìn)行排序，表格的數(shù)據(jù)還是從服務(wù)器獲取……所以這個(gè)模式還有待研究

**：在項(xiàng)目中后臺(tái)controller接收的參數(shù)是數(shù)組，ajax的請(qǐng)求包含復(fù)雜參數(shù)的時(shí)候，請(qǐng)求的類(lèi)型一定要是post；

三、進(jìn)階功能
1、隱藏列
可以通過(guò) "columns.visible" 屬性規(guī)定列是否顯示，但是這樣就不能獲取此列的值，如果要隱藏id列，又要根據(jù)id觸發(fā)事件就辦不到了 = =，后來(lái)查API后想了一個(gè)笨辦法，可以借助 columns.render 屬性，用法如下：

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}

注意 render 后的函數(shù)有三個(gè)參數(shù)，data/type/full，其中full參數(shù)是行的所有數(shù)據(jù)（官網(wǎng)在此注明：只是行中的數(shù)據(jù)，而不是data屬性的值，所以就算data中有你想要的值，但你沒(méi)有給他一列的話也是獲取不到的），可以在render中直接使用你想隱藏的值，如果表格外部要引用這個(gè)值，可以在render中組裝一個(gè)隱藏的<input>，外部就可以獲取到了，不過(guò)這種方法真的非常蠢，如果你有好的方法，請(qǐng)一定要告訴我。

2、輸入頁(yè)碼跳轉(zhuǎn)頁(yè)面
我們可以通過(guò) pagingType 屬性來(lái)設(shè)置表格分頁(yè)按鈕樣式，但是DataTables的幾個(gè)默認(rèn)樣式都沒(méi)有項(xiàng)目中需要的輸入頁(yè)碼進(jìn)行跳轉(zhuǎn)的樣式。但是在官網(wǎng)的 plug-in 頁(yè)中介紹了幾種分頁(yè)按鈕的插件，其中的 input 分頁(yè)插件就可以滿足我們的需求，只要引入插件的js，再將 pagingType 的值改為 "input" 就可以了。js文件的 CDN 是：

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

DataTables 官網(wǎng)

您可能感興趣的文章: