jQuery表格外掛程式datatables用法匯總_jquery
- WBOY原創
- 2016-05-16 15:07:351254瀏覽
DataTables是一個jQuery的表格插件，本文為大家分享了表格插件datatables用法，介紹了基礎的部分知識，具體內容如下
一、初始化
在頁面中
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="//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();
} );
二、常用配置
在初始化的時候可以透過一些常用的配置項目來配置表格，這是我在專案中實際用到的
$("#vivo_table_list").dataTable({
pageLength: 10, //更改初始页面长度 （每页的行数）
processing: true, //显示正在处理字符串
serverSide: false, // 服务器模式，这一点非常奇怪*
ordering: true, // 是否启用Datatables排序
searching: false, // 开启搜索
autoWidth: false,
zeroRecords: "没有查询数据",
destroy: true, // 从当前上下文销毁掉Datatables对象 (妹搞懂)
pagingType: "input", // 分页按钮种类显示选项
language: {
url: "cn.txt" // 本地化
},
dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
ajax: {
url: "/url",
type: "post", // ajax请求的类型 **
data: function () {
return that.getQueryParams(); // ajax的参数
}
},
columns: [
{title: "id", data: "id", orderable: true},
{title: "uid", data: "uid", orderable: false},
{title: "昵称", data: "nick", orderable: false},
{title: "姓名", data: "name", orderable: false},
{title: "电话", data: "tel", orderable: false},
{title: "申请时间", data: "stimeshow", orderable: true},
{title: "状态", 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+'"/>';
}
}
]
});
後台傳回的資料一定要是一個map，key是"data"，value 是資料（如果資料是List要toArray()），其中data 也是DataTables 的參數之一，表示表格要顯示的數據，所以你可以在這個map中放上其他的表格參數，只要把key設定為參數名稱就可以了。
*：配置中serverSide開啟伺服器模式，在工作使用中表格的資料是透過ajax從後台獲取，就理所當然地開啟了這個模式，但是表格對某一列排序的功能就失效了，而隨後我關閉了這一模式，發現就可以對表格中的列進行排序，表格的資料還是從伺服器取得…所以這個模式還有待研究
**： 在專案中後台controller接收的參數是數組，ajax的請求包含複雜參數的時候，請求的類型一定要是post；
三、進階功能
1、隱藏欄位
可以透過"columns.visible" 屬性規定列是否顯示，但是這樣就不能獲取此列的值，如果要隱藏id列，又要根據id觸發事件就辦不到了= =，後來查API後想了一個笨辦法，可以藉助columns.render 屬性，用法如下：
{
title: "操作", orderable: false, render: function (data,type,full) {
return '<input type="hidden" value="'+full.id+'"/>';
}
}
注意render 後的函數有三個參數，data/type/full，其中full參數是行的所有數據（官網在此註明：只是行中的數據，而不是data屬性的值，所以就算data中有你想要的值，但你沒有給他一列的話也是獲取不到的），可以在render中直接使用你想隱藏的值，如果表格外部要引用這個值，可以在render中組裝一個隱藏的，外部就可以獲得到了，不過這種方法真的非常蠢，如果你有好的方法，請一定要告訴我。
2、輸入頁碼跳轉頁
我們可以透過 pagingType 屬性來設定表格分頁按鈕樣式，但是DataTables的幾個預設樣式都沒有項目中需要的輸入頁碼進行跳轉的樣式。但在官網的 plug-in 頁中介紹了幾種分頁按鈕的插件，其中的 input 分頁插件就可以滿足我們的需求，只要引入插件的js，再將 pagingType 的值改為 "input" 就可以了。 js檔案的 CDN 是：
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
以上就是本文的全部內容，希望對大家的學習有所幫助。