建站
咨詢
售后
建站咨詢
新聞中心
jQuery Datatable是一個很強(qiáng)大的表格工具，其實大家可以參考Datatable官方網(wǎng)站來查看具體的實例以及他對應(yīng)的API。在此我們不去講解如何實現(xiàn)后端的分頁、排序、查找，本文重點講解如何對Datatable中的表格內(nèi)容進(jìn)行操作，包括改變他的樣式、增加一列非數(shù)據(jù)列以及非數(shù)據(jù)列傳遞主鍵參數(shù)。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、信陽網(wǎng)站維護(hù)、網(wǎng)站推廣。
首先，我們來定義我們的數(shù)據(jù)，本文就不去通過后端代碼實現(xiàn)數(shù)據(jù)傳遞，就直接通過一個數(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"
}
// ......
]
}接下來，我們對我們的頁面代碼進(jìn)行編寫，至于表格樣式如何編寫，請參考官方提供的css，表格代碼如下：
| Name | Position | Office | Extn. | Start date | Salary | Operation |
|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary | Operation |
最后，我們重點來看JS如何編寫。因為我們的數(shù)據(jù)源是用Object數(shù)組，因此我們需要去定義我們的datatable每一列對應(yīng)的數(shù)據(jù)列名。為了增加一列以實現(xiàn)改變列樣式，刪除和修改操作鏈接我們需要對具體的列進(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ù)據(jù)傳遞到鏈接中
{
"targets": [6], // 目標(biāo)列位置，下標(biāo)從0開始
"data": "name", // 數(shù)據(jù)列名
"render": function(data, type, full) { // 返回自定義內(nèi)容
return "Delete Update";
}
}
]
});
});運行代碼，效果圖如下：
當(dāng)我們?nèi)c擊刪除、更新鏈接時，都會發(fā)現(xiàn)我們傳遞進(jìn)去的Name。注意：此處本實例將name列隱藏了，可以參考列定義中的配置。
由于公司需要使用該技術(shù)，因此在近期博主會對前臺和后臺進(jìn)行一個抽象，屆時會發(fā)布到本博客，請持續(xù)關(guān)注，謝謝。
附：jQuery Datatable Official Site: http://www.datatables.net
文章題目：jQueryDatatable自定義列
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/gijjdg.html
