非我族類的DataTables.js：分頁和排序無作用原因－Jemmy Walker

　　Java Script的世界一向隨便，非我族類的一套library反而是種嚴謹，而對習慣隨便寫Java Script的我，花了半天才找到解法。問題如下：

HTML內文

使用jQuery的DataTables.js去修飾table_grid

$(document).ready(function() {
    oTable = $('#table_grid').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "iDisplayLength": 5
} );

動態生成reocrd

function buildTable(tableData) {
    var tableBody = $("#tableBody");
    tableBody.html("");
    //add the table rows
    $.each(tableData, function(i){
    tableBody.append('<tr></tr>');
    var tr = $('tr:last', tableBody);
        tr.append('<td>' + tableData[i].id + '</td>');
        tr.append('<td>' + tableData[i].group + '</td>');
    });
};

　　結果呢？資料正常顯示，但分頁、排序的功能完全無效，後來才知道，既然使用了DataTables.js，就要用它的function去動態生成，雖同屬jQuery，不能用純jQuery語法生成。改法如下：

var oTable;        // 宣告為global變數
function buildTable(tableData) {
    oTable.fnClearTable(0);    // 等同html("")
    $.each(tableData, function(i){
        oTable.fnAddData([     // 動態新增record
            tableData[i].id,
            tableData[i].group
        ]);
    });
    oTable.fnDraw();           // 重新繪製
};

　　那麼誰去call buildTable呢？是Ajax：