jQuery Datatable 自定义列

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，表格代码如下：

<table id="example" class="display" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>Start date</th>
 <th>Salary</th>
 <th>Operation</th> <!-- 这一列为自定义列 -->
 </tr>
 </thead>
 
 <tfoot>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>Start date</th>
 <th>Salary</th>
 <th>Operation</th> <!-- 这一列为自定义列 -->
 </tr>
 </tfoot>
 </table>

最后，我们重点来看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 "<span style='color:red;'>" + data + "</span>";
 }
 },
 // 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中
 {
 "targets": [6], // 目标列位置，下标从0开始
 "data": "name", // 数据列名
 "render": function(data, type, full) { // 返回自定义内容
 return "<a href='/delete?name=" + data + "'>Delete</a>&nbsp;<a href='/update?name=" + data + "'>Update</a>";
 }
 }
 ]
 });
 });

运行代码，效果图如下：