jquery 的datatables插件問題

 

翻頁後js失效；

重繪事件-當表格重繪完成後

從新綁定事件： draw.dt

$('#example').dataTable();
 
$('#example').on( 'draw.dt', function () {
    console.log( 'Redraw occurred at: '+new Date().getTime() );
} );

　　

(多列排序)
//按第二列降序排序，

出現提示： Datables wrning(table id='example'):Cannot reinitialise DataTable. To retrieve the
Datables object for this table,please pass eithser no arguments to the dataTable() function,

解決方法：

一、加 "bDestroy":true,和"bRetrieve": true, 只是能屏蔽提示。 2、 $(document).ready(function () { $('#Todolisttable').dataTable().fnDestroy(); //必須加fnDestroy() 這個.將這個表格先銷燬，而後在從新生成。 $('#Todolisttable').dataTable({ "aaSorting": [ [1, "desc"] //按第二列降序排序， ] }); });

2、 $(document).ready(function () {
            $('#Todolisttable').dataTable().fnDestroy(); 
            $('#Todolisttable').dataTable({
                "aaSorting": [
                    [1, "desc"] 
          ] }); });

 

用了DataTables作爲展現數據的表格。該控件支持分頁，並且又漂亮。這是官網的地址http://www.datatables.net/ 。本文記錄我在工做中用到DataTables的相關功能及實現。

 

在採用這個控件以前，服務端向網頁返回數據，頁面用javascipt將數據拼接成html的表格，代碼中充斥着不少 += '<td>' '<tr>' '<a>'。並且還要處理分頁，每一個頁碼還要本身綁定一個拼接的url請求，代碼不只長，並且頁面的展現效果很差功能也不夠強大。

 

 

採用了這個控件展現數據後，javascript的代碼減小了70-80行。它要求服務端要按照它規定的數據格式返回數據，接着會幫咱們自動處理分頁和數據的展現，就不用咱們手動拼接字符串構造table表的元素了。

 

先看代碼：

 

function generate_table() {
    g_table = $('#historyResult').dataTable({
        "oLanguage": {
            "sLengthMenu": "每頁 _MENU_ 條數據",
            "sZeroRecords": "沒有數據",
            "sInfo": "_START_ - _END_ 總(_TOTAL_)",
            "sInfoEmpty": "0 - 0 總數： 0"
        },
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "bSort":false,
        "bFilter": false,
        "sAjaxSource": "/index.php/history/queryHistory",

        "fnServerParams": function( aoData )
        {
            aoData.push(
                    {"name":"keywords","value":$('#keyword_txt').val(),
                    {"name":"start_date","value":$('#start_date_txt').val()},
                    {"name":"end_date","value":$('#end_date_txt').val()}
                )
        }
    });
}

 

 

具體的參數意思能夠參考官方文檔。這裏提一下fnServerParams。這個參數能夠幫咱們傳遞頁面的其餘參數，這個例子中，我傳遞了關鍵字、起止日期信息，主要用於服務端的數據查找過濾。

 

用chrome看一下控件會向服務端傳遞什麼：

 

 

這是底部的分頁欄

 

 

當我點第二頁時，傳遞參數以下：

 

注意到iDisplayLength是10，由於我默認是每頁展現10條數據，這個值能夠調整。當我點第二頁時，iDisplayStart從0變到10。其實分頁就是這麼回事，前端告訴服務端，我須要那段數據，你給我找出來返回給我。

 

服務端的返回格式以下（PHP）：

$ret = array(
                "sEcho" => intval($_GET['sEcho']),
                "iTotalRecords" => $data_count,
                "iTotalDisplayRecords" => $data_count,
                "aaData" => array()
            );

 

$data_count是總數據量。aaData是須要展現的數據，以後能夠填充。代碼以下

$ret['aaData'][] = array($id, $user, $action, $business, $files, $time, $result);

 

這是填充一條數據的PHP代碼，注意變量的先後位置很重要，這決定了表格中展現數據的位置。若是想在表格中嵌套<a>標籤，這也是能夠的。在服務端將數據拼接成a標籤返回便可。

 

填充完後就返回數據：

echo json_encode($ret);

 

 

我所維護的頁面有一個功能，就是能根據日期和關鍵字查找記錄。當咱們點擊表格中的下一頁時，它會自動的向服務端發起一次數據請求。然而，怎麼讓用戶點擊一個按鈕時，也發起一次數據請求呢？

 

個人辦法是：將這個表格先銷燬，而後在從新生成。代碼以下：

 

$("#search").click(function(){
        g_table.fnDestroy();
        generate_table();
　　});

 

 

從新生成表格會默認第一頁，而每次搜索都是根據不一樣的關鍵字和日期的，因此跳到第一頁是合理的。若是不用fnDestroy()，試圖直接覆蓋g_table從新生成，這是不容許的。

 

至此，實現了基於DataTables的數據查找及分頁。