各位同僚中午好，在後端開發中我們會經常處理一些表格，其用戶體驗不佳。其不佳的地方主要是分頁展示數據上，需要跳轉頁面，為此本人今天要分享一個jq應用插件。
網上也有相關的文檔，文檔支持中文。這是文檔地址：
http://datatables.club/
下面我就開始介紹下最基本的css與js引用了。
css部分 jquery.dataTables.css 與js部分 jquery.dataTables.js 、 jquery-1.10.2.min.js，
HTML中我們只需要一個帶指定id的table標籤就可以了，不用寫php代碼或者smarty一類的模板變量例如：
這樣子減少了我們的php或者smarty的代碼量，接下來就是我們js部分如圖：
請點擊此處輸入圖片描述
dataTable()方法中大括號部分就是這個插件的配置部分，此處我只介紹重要部分，其餘擴展大家可以查看在線中文文檔。
對於後端來說處理數據才是重要的，首先開啟dataTable 服務器模式 ， 指定服務請求地址與請求類型 例：
serverSide: true,
ajax: {
url: "
www.demo.com",
type: "POST",
data: function (d) {
//codel...
}
},
【白銀】W. 2017/3/24 11:22:17
在ajax中的data function 主要作用是傳遞請求參數。
格式為：
data: function (d) {
d.search.uid = uid;
d.search.groupId = groupId;
d.search.cityIds = cityIds;
}
或者
data: function (d) {
uid = uid;
groupId = groupId;
cityIds = cityIds;
}
當我們發送請求時對應的參數與值都會一起發送到服務端。我們無需做相關處理，這時我們需要到服務端處理我們接收到的數據，根據客戶端的請求返回數據。例如：
客戶端請求發送的數據我們需要過濾下，客戶端之前寫的請求所帶參數也會獲取到這裡就不一一舉例說明了，服務端返回值必須是json格式的數據且有四個重要的字段必須返回
draw 客戶端傳遞的原封不動的返回
recordsTotal 數據庫裡總共記錄數
recordsFiltered 過濾後的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾後的記錄數）
data 查詢後的數據
操作數據翻頁主要是根據客戶端傳遞的start、length兩個參數，根據英文意思想必我不用說明大家都知道是怎麼用的了吧。
得到數據後我們需要在客戶端做下渲染處理。
也就是配置項中的columnDefs配置項
columnDefs 中的數據格式如下
{
data: '字段名（返回data數據列中的字段 例如 id ）',
orderable: false, //關閉列排序 如果有興趣可以自行研究
targets: 0,//編號從0 開始，必寫。
title: '列標題名稱',
render: function (data, type, row, meta) {
每一行顯示處理你可以直接返回對應字段數據例如 return
row.id
也可以做點html修飾 return ' <input value =" '+
row.id+' "> '
}
},
....code
相關推薦
