jQuery Datatable是一个很强大的表格工具，其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实现后端的分页、排序、查找，本文重点讲解如何对Datatable中的表格内容进行操作，包括改变他的样式、增加一列非数据列以及非数据列传递主键参数。
首先，我们来定义我们的数据，本文就不去通过后端代码实现数据传递，就直接通过一个数据文件作为数据源。如下：
重庆分公司
重庆分公司
{
"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"
}
// ......
]
}接下来，我们对我们的页面代码进行编写，至于表格样式如何编写，请参考官方提供的css，表格代码如下：
| Name | Position | Office | Extn. | Start date | Salary | Operation |
|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary | Operation |
最后，我们重点来看JS如何编写。因为我们的数据源是用Object数组，因此我们需要去定义我们的datatable每一列对应的数据列名。为了增加一列以实现改变列样式，删除和修改操作链接我们需要对具体的列进行定义，这里用到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列变为红色
{
"targets": [5], // 目标列位置，下标从0开始
"data": "salary", // 数据列名
"render": function(data, type, full) { // 返回自定义内容
return "" + data + "";
}
},
// 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中
{
"targets": [6], // 目标列位置，下标从0开始
"data": "name", // 数据列名
"render": function(data, type, full) { // 返回自定义内容
return "Delete Update";
}
}
]
});
});运行代码，效果图如下：
当我们去点击删除、更新链接时，都会发现我们传递进去的Name。注意：此处本实例将name列隐藏了，可以参考列定义中的配置。
由于公司需要使用该技术，因此在近期博主会对前台和后台进行一个抽象，届时会发布到本博客，请持续关注，谢谢。
附：jQuery Datatable Official Site: http://www.datatables.net
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
