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

運行代碼，效果圖如下：

當我們去點擊刪除、更新鏈接時，都會發現我們傳遞進去的Name。注意：此處本實例將name列隱藏了，可以參考列定義中的配置。

由于公司需要使用該技術，因此在近期博主會對前臺和后臺進行一個抽象，屆時會發布到本博客，請持續關注，謝謝。

附：jQuery Datatable Official Site: http://www.datatables.net