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>' ); } } } ); } );

fnDrawCallback：draw画 ，这个应该是重绘的回调函数

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

fnInitComplete：datatables初始化完毕后会调用这个方法

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

fnRowCallback：行的回调函数（所有行得回调函数）

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

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