jQuery Datatable是一個(gè)很強(qiáng)大的表格工具，其實(shí)大家可以參考Datatable官方網(wǎng)站來查看具體的實(shí)例以及他對(duì)應(yīng)的API。在此我們不去講解如何實(shí)現(xiàn)后端的分頁、排序、查找，本文重點(diǎn)講解如何對(duì)Datatable中的表格內(nèi)容進(jìn)行操作，包括改變他的樣式、增加一列非數(shù)據(jù)列以及非數(shù)據(jù)列傳遞主鍵參數(shù)。
首先，我們來定義我們的數(shù)據(jù)，本文就不去通過后端代碼實(shí)現(xiàn)數(shù)據(jù)傳遞，就直接通過一個(gè)數(shù)據(jù)文件作為數(shù)據(jù)源。如下：
重慶分公司
重慶分公司
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
}
// ......
]
}接下來，我們對(duì)我們的頁面代碼進(jìn)行編寫，至于表格樣式如何編寫，請參考官方提供的css，表格代碼如下：
| Name | Position | Office | Extn. | Start date | Salary | Operation |
|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary | Operation |
最后，我們重點(diǎn)來看JS如何編寫。因?yàn)槲覀兊臄?shù)據(jù)源是用Object數(shù)組，因此我們需要去定義我們的datatable每一列對(duì)應(yīng)的數(shù)據(jù)列名。為了增加一列以實(shí)現(xiàn)改變列樣式，刪除和修改操作鏈接我們需要對(duì)具體的列進(jìn)行定義，這里用到datatable的columnDefs，代碼如下：
$(document).ready(function() {
$('#example').dataTable({
"ajax" : 'data.txt',
"columns": [
{ "data": "name", "visible": false},
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
"columnDefs": [
// 將Salary列變?yōu)榧t色
{
"targets": [5], // 目標(biāo)列位置，下標(biāo)從0開始
"data": "salary", // 數(shù)據(jù)列名
"render": function(data, type, full) { // 返回自定義內(nèi)容
return "" + data + "";
}
},
// 增加一列，包括刪除和修改，同時(shí)將我們需要傳遞的數(shù)據(jù)傳遞到鏈接中
{
"targets": [6], // 目標(biāo)列位置，下標(biāo)從0開始
"data": "name", // 數(shù)據(jù)列名
"render": function(data, type, full) { // 返回自定義內(nèi)容
return "Delete Update";
}
}
]
});
});運(yùn)行代碼，效果圖如下：
當(dāng)我們?nèi)c(diǎn)擊刪除、更新鏈接時(shí)，都會(huì)發(fā)現(xiàn)我們傳遞進(jìn)去的Name。注意：此處本實(shí)例將name列隱藏了，可以參考列定義中的配置。
由于公司需要使用該技術(shù)，因此在近期博主會(huì)對(duì)前臺(tái)和后臺(tái)進(jìn)行一個(gè)抽象，屆時(shí)會(huì)發(fā)布到本博客，請持續(xù)關(guān)注，謝謝。
附：jQuery Datatable Official Site: http://www.datatables.net
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
