论坛首页 Web前端技术论坛

Datatables中文API——回调函数

浏览 19520 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-10-03  
推荐是用ctrl+f查找使用,有写的不对的地方,也希望大家拍砖



更多datatables在http://bbs.sailit.cn 欢迎大家来做客


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 重绘了' );
    }
  } );
} );
fnFooterCallback:底部的回调函数,这个可以用来做总计之类的功能
$(document).ready( function() {
  $('#example').dataTable( {
    "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
      nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;
    }
  } );
} )
fnFormatNumber:顾名思义,格式化数字的显示方式
$(document).ready( function() {
  $('#example').dataTable( {
    "fnFormatNumber": function ( iIn ) {
      if ( iIn < 1000 ) {
        return iIn;
      } else {
        var
          s=(iIn+""),
          a=s.split(""), out="",
          iLen=s.length;
        
        for ( var i=0 ; i<iLen ; i++ ) {
          if ( i%3 === 0 && i !== 0 ) {
            out = "'"+out;
          }
          out = a[iLen-i-1]+out;
        }
      }
      return out;
    };
  } );
} );
fnHeaderCallback:表头的回调函数
$(document).ready( function() {
  $('#example').dataTable( {
    "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
      nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
    }
  } );
} )
fnInfoCallback:datatables信息的回调函数
$('#example').dataTable( {
  "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
    return iStart +" to "+ iEnd;
  }
} );
fnInitComplete:datatables初始化完毕后会调用这个方法
$(document).ready( function() {
  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      alert( 'DataTables 初始化完毕' );
    }
  } );
} )
fnPreDrawCallback:每一次绘datatables时候调用的方法
$(document).ready( function() {
  $('#example').dataTable( {
    "fnPreDrawCallback": function( oSettings ) {
      if ( $('#test').val() == 1 ) {
        return false;
      }
    }
  } );
} );
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
      } );
    }
  } );
} );
fnServerParams:向服务器传额外的参数
$(document).ready( function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "more_data", "value": "my_value" } );
    }
  } );
} );
fnStateLoad:读取状态的回调函数
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoad": function (oSettings) {
      var o;
      
     
//发送一个异步请求给服务器来返回数据
      //这是个同步的发送
      $.ajax( {
        "url": "/state_load",
        "async": false,
        "dataType": "json",
        "success": function (json) {
          o = json;
        }
      } );
      
      return o;
    }
  } );
} );
fnStateLoadParams:和上面的不知道什么区别,没用过
// Remove a saved filter, so filtering is never loaded
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );


// Disallow state loading by returning false
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      return false;
    }
  } );
} );
fnStateLoaded:又是这个,加了ed 不知道意思没用过
// Show an alert with the filtering value that was saved
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoaded": function (oSettings, oData) {
      alert( 'Saved filter was: '+oData.oSearch.sSearch );
    }
  } );
} );
fnStateSave:状态储存
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
      // Send an Ajax request to the server with the state object
      $.ajax( {
        "url": "/state_save",
        "data": oData,
        "dataType": "json",
        "method": "POST"
        "success": function () {}
      } );
    }
  } );
} );
fnStateSaveParams :状态储存参数,没用过,不明白
// Remove a saved filter, so filtering is never saved
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSaveParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics