小試牛刀，DataTable使用技巧

　　最近做RoR開發項目，原有的表格處理程序難以滿足需求的多樣性，故選取DataTable這一利器來縮短開發時間，提高程序質量。

　　我主要是用到了DataTable的幾個功能： 排序列指定，頁面布局調整，大規模數據異步查詢，數據格式自定義及其排序等等。之前對Javascript和jQuery不是很熟悉，借此機會也熟悉下Javascript以及設計模式的一些內容。本文中，我們假定要處理的table 的class為example. 基於此我們一一講述上面所述幾個功能。

　　1） 指定可排序的列

　　　　DataTable的API很靈活， 他的aoColumnDefs參數可以讓你指定多種功能，幾乎滿足你的全部要求。 對於該參數，你可以借助aTargets屬性來指定你要處理的列。接受參數既可以是列的序號，也可以是class名。具體做法如下：

$('.example').dataTable({
    "aoColumnDefs": [
    {"bSortable": false, "aTargets": ['unsortable']}
]
});

　　2)  頁面布局調整

　　　　　我們可以借助aoColumnDefs來指定列寬。

$('.example').dataTable({
    "aoColumnDefs": [
    {"sWidth":"4em", "aTargets": ['sort_arrow']},
]
});

　　3） 異步查詢

　　當表格的數據量過大，系統難以一次性將其取出時， 需要借助異步查詢來得到我們想要的結果，做到隨用隨取。 這就要求我們在服務端對數據處理成JSON格式，由前端統一顯示。

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../server_side/scripts/server_processing.php"
    } );
} );

　　4) 數據格式自定義及排序

　　datatable默認支持對數字、日期、字符串、貨幣等排序。加入需要顯示的數據不是這四種，需要我們自己自定義數據類型和排序方式。參考代碼如下：

jQuery.fn.dataTableExt.oSort['quota-byte-asc'] = function(a, b) {
      var x = parseFloat(a.split(",")[1]);
      var y = parseFloat(b.split(",")[1]);
      return ((x < y) ? -1 : ((x > y) ?  1 : 0));
    }

 jQuery.fn.dataTableExt.oSort['quota-byte-desc'] = function(a,b) {
      var x = parseFloat(a.split(",")[1]);
      var y = parseFloat(b.split(",")[1]);
      return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
    }
$('.ug_datatable').dataTable({
      "aoColumnDefs": [
      {"aTargets": ['normailize'],
       "mRender": function (data, display, row) {
        return data.split(",")[0];
        }},
      {"aTargets": ["normailize"],
       "sType": "quota-byte"}
      ],
      "bFilter": false,
      "sPaginationType": "full_numbers"
});

datatable的源碼在摸索中。。。