jQuery Datatable 自定义列

jQuery Datatable是一个很强大的表格工具，其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实现后端的分页、排序、查找，本文重点讲解如何对Datatable中的表格内容进行操作，包括改变他的样式、增加一列非数据列以及非数据列传递主键参数。

首先，我们来定义我们的数据，本文就不去通过后端代码实现数据传递，就直接通过一个数据文件作为数据源。如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

$(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>" ;                        }                    }                ]          });      });

运行代码，效果图如下：

当我们去点击删除、更新链接时，都会发现我们传递进去的Name。注意：此处本实例将name列隐藏了，可以参考列定义中的配置。