jquery datatables api

Posted 2020-07-22 看一场塞北的雪

三：回调 fnCookieCallback：还没有使用过

1. $(document).ready( function () {
2.   $(‘#example‘).dataTable( {
3.     "fnCookieCallback": function (sName, oData, sExpires, sPath) {
4.       // Customise oData or sName or whatever else here
5.       return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
6.     }
7.   } );
8. } );

复制代码

fnCreatedRow：顾名思义，创建行得时候的回调函数

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnCreatedRow": function( nRow, aData, iDataIndex ) {
4.       // 为a的话字体加粗
5.       if ( aData[4] == "A" )
6.       {
7.         $(‘td:eq(4)‘, nRow).html( ‘A‘ );
8.       }
9.     }
10.   } );
11. } );

复制代码

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

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnDrawCallback": function( oSettings ) {
4.       alert( ‘DataTables 重绘了‘ );
5.     }
6.   } );
7. } );

复制代码

fnFooterCallback：底部的回调函数，这个可以用来做总计之类的功能

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
4.       nFoot.getElementsByTagName(‘th‘)[0].innerHTML = "Starting index is "+iStart;
5.     }
6.   } );
7. } )

复制代码

fnFormatNumber：顾名思义，格式化数字的显示方式

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnFormatNumber": function ( iIn ) {
4.       if ( iIn < 1000 ) {
5.         return iIn;
6.       } else {
7.         var
8.           s=(iIn+""),
9.           a=s.split(""), out="",
10.           iLen=s.length;
11.          
12.         for ( var i=0 ; i
13.           if ( i%3 === 0 && i !== 0 ) {
14.             out = "‘"+out;
15.           }
16.           out = a[iLen-i-1]+out;
17.         }
18.       }
19.       return out;
20.     };
21.   } );
22. } );

复制代码

fnHeaderCallback：表头的回调函数

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
4.       nHead.getElementsByTagName(‘th‘)[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
5.     }
6.   } );
7. } )

复制代码

fnInfoCallback：datatables信息的回调函数

1. $(‘#example‘).dataTable( {
2.   "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
3.     return iStart +" to "+ iEnd;
4.   }
5. } );

复制代码

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

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnInitComplete": function(oSettings, json) {
4.       alert( ‘DataTables has finished its initialisation.‘ );
5.     }
6.   } );
7. } )

复制代码

fnPreDrawCallback：每一次绘datatables时候调用的方法

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnPreDrawCallback": function( oSettings ) {
4.       if ( $(‘#test‘).val() == 1 ) {
5.         return false;
6.       }
7.     }
8.   } );
9. } );

复制代码

fnRowCallback：行的回调函数

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
4.       // Bold the grade for all ‘A‘ grade browsers
5.       if ( aData[4] == "A" )
6.       {
7.         $(‘td:eq(4)‘, nRow).html( ‘A‘ );
8.       }
9.     }
10.   } );
11. } );

复制代码

fnServerData：这个是结合服务器模式的回调函数，用来处理服务器返回过来的数据

1. // POST data to server
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "bProcessing": true,
5.     "bServerSide": true,
6.     "sAjaxSource": "xhr.php",
7.     "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
8.       oSettings.jqXHR = $.ajax( {
9.         "dataType": ‘json‘,
10.         "type": "POST",
11.         "url": sSource,
12.         "data": aoData,
13.         "success": fnCallback
14.       } );
15.     }
16.   } );
17. } );

复制代码

fnServerParams：向服务器传额外的参数

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "bProcessing": true,
4.     "bServerSide": true,
5.     "sAjaxSource": "scripts/server_processing.php",
6.     "fnServerParams": function ( aoData ) {
7.       aoData.push( { "name": "more_data", "value": "my_value" } );
8.     }
9.   } );
10. } );

复制代码

fnStateLoad：读取状态的回调函数

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "bStateSave": true,
4.     "fnStateLoad": function (oSettings) {
5.       var o;
6.        
7.       // Send an Ajax request to the server to get the data. Note that
8.       // this is a synchronous request.
9.       $.ajax( {
10.         "url": "/state_load",
11.         "async": false,
12.         "dataType": "json",
13.         "success": function (json) {
14.           o = json;
15.         }
16.       } );
17.        
18.       return o;
19.     }
20.   } );
21. } );

复制代码

fnStateLoadParams：和上面的不知道什么区别，没用过

1. // Remove a saved filter, so filtering is never loaded
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "bStateSave": true,
5.     "fnStateLoadParams": function (oSettings, oData) {
6.       oData.oSearch.sSearch = "";
7.     }
8.   } );
9. } );
10. // Disallow state loading by returning false
11. $(document).ready( function() {
12.   $(‘#example‘).dataTable( {
13.     "bStateSave": true,
14.     "fnStateLoadParams": function (oSettings, oData) {
15.       return false;
16.     }
17.   } );
18. } );

复制代码

fnStateLoaded：又是这个，加了ed 不知道意思没用过

1. // Show an alert with the filtering value that was saved
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "bStateSave": true,
5.     "fnStateLoaded": function (oSettings, oData) {
6.       alert( ‘Saved filter was: ‘+oData.oSearch.sSearch );
7.     }
8.   } );
9. } );

复制代码

fnStateSave：状态储存

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "bStateSave": true,
4.     "fnStateSave": function (oSettings, oData) {
5.       // Send an Ajax request to the server with the state object
6.       $.ajax( {
7.         "url": "/state_save",
8.         "data": oData,
9.         "dataType": "json",
10.         "method": "POST"
11.         "success": function () {}
12.       } );
13.     }
14.   } );
15. } );

复制代码

fnStateSaveParams ：状态储存参数，没用过，不明白

1. // Remove a saved filter, so filtering is never saved
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "bStateSave": true,
5.     "fnStateSaveParams": function (oSettings, oData) {
6.       oData.oSearch.sSearch = "";
7.     }
8.   } );
9. } );

复制代码
最后注明：本文转自http://blog.csdn.net/lisky119/article/details/25884197