Jquery DataTable 函数说明及示例

实例代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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：还没有使用过

1 2 3 4 5 6 7 8

$(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：顾名思义，创建行得时候的回调函数

1 2 3 4 5 6 7 8 9 10 11

$(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画 ，这个应该是重绘的回调函数

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8 9 10 11

$(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：这个是结合服务器模式的回调函数，用来处理服务器返回过来的数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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