JQuery DataTable的配置項及事件

 

當我們需要在加載或者顯示表格的時候，改變jquery datatable 的數據，或增加一些html標簽處理。

可以通過Jquery DataTable的回調函數處理。

 

實例代碼：

if (oTable != null) { oTable.fnDestroy(); };
var detail="../Pages/detail/detail.aspx?oper=edit&id=";
oTable = $("#TableSuspectList").dataTable({
"aaData": tabledata, "bPaginate": false, "sPaginationType": "full_numbers",
"bPaginate": true, //翻頁功能
"bLengthChange": false, //改變每頁顯示數據數量
"iDisplayLength": 10,
"oLanguage": {
"sProcessing": "正在加載中......",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "正在加載中......",
"sEmptyTable": "表中無數據存在！",
"sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sInfoEmpty": "顯示0到0條記錄",
"sInfoFiltered": "數據表中共為 _MAX_ 條記錄",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
},
"sScrollY": "100%", "sScrollX": "100%",
"bFilter": false, "bProcessing": false,
"bScrollInfinite": false,
"bInfo": false, "bDestroy": true,
"fnCreatedRow": function (nRow, aData, iDisplayIndex) { 
$('td:eq(7)', nRow).html("<a href=\"javascript:void(0);\" 
 onclick=\"OpenTab('" + aData[1] + ":詳情','" +  detail
 + aData[0] + "&LawCaseID="+LawCaseID + "');\">詳情</a>");
return nRow;
}
});

 

fnCookieCallback：還沒有使用過回調函數說明：

$(document).ready( function () {
  $('#example').dataTable( {
    "fnCookieCallback": function (sName, oData, sExpires, sPath) {
      // Customise oData or sName or whatever else here
      return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
    }
  } );
} );

 

 fnCreatedRow：顧名思義，創建行得時候的回調函數

$(document).ready( function() {
  $('#example').dataTable( {
    "fnCreatedRow": function( nRow, aData, iDataIndex ) {
      // 為a的話字體加粗
      if ( aData[4] == "A" )
      {
        $('td:eq(4)', nRow).html( '<b>A</b>' );
      }
    }
  } );
} );

 

$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( 'DataTables 重繪了' );
    }
  } );
} );

 

fnDrawCallback：draw畫 ，這個應該是重繪的回調函數

fnInitComplete：datatables初始化完畢后會調用這個方法

$(document).ready( function() {
  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      alert( 'DataTables 初始化完畢' );
    }
  } );
} )

 

$(document).ready( function() {
  $('#example').dataTable( {
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      // 所有的a都加粗
      if ( aData[4] == "A" )
      {
        $('td:eq(4)', nRow).html( '<b>A</b>' );
      }
    }
  } );
} );

 

fnRowCallback：行的回調函數（所有行得回調函數）

fnServerData：這個是結合服務器模式的回調函數，用來處理服務器返回過來的數據

// POST data to server
$(document).ready( function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "xhr.php",
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
      oSettings.jqXHR = $.ajax( {
        "dataType": 'json',
        "type": "POST",
        "url": sSource,
        "data": aoData,
        "success": fnCallback
      } );
    }
  } );
} );