JQuery插件datatables相关api

1. var docrTable = $('#docrevisontable').dataTable({
2. "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
3. "bServerSide" : true, //是否启动服务器端数据导入
4. "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
5. "bJQueryUI" : true, //是否使用 jQury的UI theme
6. "sScrollY" : 450, //DataTables的高
7. "sScrollX" : 820, //DataTables的宽
8. "aLengthMenu" : [20, 40, 60], //更改显示记录数选项
9. "iDisplayLength" : 40, //默认显示的记录数
10. "bAutoWidth" : false, //是否自适应宽度
11. //"bScrollInfinite" : false, //是否启动初始化滚动条
12. "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
13. "bPaginate" : true, //是否显示（应用）分页器
14. "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
15. "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
16. "bSort" : true, //是否启动各个字段的排序功能
17. "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
18. "bFilter" : true, //是否启动过滤、搜索功能
19. "aoColumns" : [{
20. "mDataProp" : "USERID",
21. "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
22. "bVisible" : false //此列不显示
23. }, {
24. "mDataProp" : "USERNAME",
25. "sTitle" : "用户名",
26. "sDefaultContent" : "",
27. "sClass" : "center"
28. }, {
29. "mDataProp" : "EMAIL",
30. "sTitle" : "电子邮箱",
31. "sDefaultContent" : "",
32. "sClass" : "center"
33. }, {
34. "mDataProp" : "MOBILE",
35. "sTitle" : "手机",
36. "sDefaultContent" : "",
37. "sClass" : "center"
38. }, {
39. "mDataProp" : "PHONE",
40. "sTitle" : "座机",
41. "sDefaultContent" : "",
42. "sClass" : "center"
43. }, {
44. "mDataProp" : "NAME",
45. "sTitle" : "姓名",
46. "sDefaultContent" : "",
47. "sClass" : "center"
48. }, {
49. "mDataProp" : "ISADMIN",
50. "sTitle" : "用户权限",
51. "sDefaultContent" : "",
52. "sClass" : "center"
53. }],
54. "oLanguage": { //国际化配置
55. "sProcessing" : "正在获取数据，请稍后...",
56. "sLengthMenu" : "显示 _MENU_ 条",
57. "sZeroRecords" : "没有您要搜索的内容",
58. "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
59. "sInfoEmpty" : "记录数为0",
60. "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
61. "sInfoPostFix" : "",
62. "sSearch" : "搜索",
63. "sUrl" : "",
64. "oPaginate": {
65. "sFirst" : "第一页",
66. "sPrevious" : "上一页",
67. "sNext" : "下一页",
68. "sLast" : "最后一页"
69. }
70. },
71. "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
72. /* 用来改写用户权限的 */
73. if (aData.ISADMIN == '1')
74. $('td:eq(5)', nRow).html('管理员');
75. if (aData.ISADMIN == '2')
76. $('td:eq(5)', nRow).html('资料下载');
77. if (aData.ISADMIN == '3')
78. $('td:eq(5)', nRow).html('一般用户');
79. return nRow;
80. },
81. "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
82. //服务器端，数据回调处理
83. "fnServerData" : function(sSource, aDataSet, fnCallback) {
84. $.ajax({
85. "dataType" : 'json',
86. "type" : "POST",
87. "url" : sSource,
88. "data" : aDataSet,
89. "success" : fnCallback
90. });
91. }
92. });
93. $("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
94. $(docrTable.fnSettings().aoData).each(function() {
95. $(this.nTr).removeClass('row_selected');
96. });
97. $(event.target.parentNode).addClass('row_selected');
98. var aData = docrTable.fnGetData(event.target.parentNode);
99. $("#userId").val(aData.USERID);
100. $("#userN").val(aData.USERNAME);
101. });
102. $('#docrevisontable_filter').html('<span>用户管理列表');
103. $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="创建"/>');
104. $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="修改"/>');
105. $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="删除"/>');
106. $('#docrevisontable_filter').append('</span>');
107. }

1. var oTable = $('#example').dataTable();
2. oTable.fnSetColumnVis( 0, false);//隐藏列

var alldata=$('#example').dataTable().fnGetData();//得到页面中所有对象

// Row data
$(document).ready(function() {
oTable = $('#example').dataTable();

oTable.$('tr').click( function () {
var data = oTable.fnGetData( this );
// ... do something with the array / object of data for the row
} );
} );

// Individual cell data
$(document).ready(function() {
oTable = $('#example').dataTable();

oTable.$('td').click( function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+sData );
} );
} );

$('#example').dataTable().fnUpdate( 'a' , 1 , 1 ,false); //coll
$('#example').dataTable().fnUpdate( ['a','b'] , 1 ); //row

1. var tableSetings=$('#example').dataTable().fnSettings()
2. var paging_length=tableSetings._iDisplayLength;//当前每页显示多少
3. var page_start=tableSetings._iDisplayStart;//当前页开始
4. var page=Div(page_start,paging_length);
5. function Div(exp1, exp2) {  //整除
6. var n1 = Math.round(exp1); //四舍五入
7. var n2 = Math.round(exp2); //四舍五入
8. var rslt = n1 / n2; //除
9. if (rslt >= 0) {
10. rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。
11. }
12. else {
13. rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。
14. }
15. return rslt;
16. }

1. $('#example').dataTable().fnPageChange(page);

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

复制代码

'<"top"i>rt<"bottom"flp><"clear">'

复制代码

复制代码

复制代码

复制代码

二： 列属性

aoColumnDefs : This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in
the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array
to target one of many columns and each element in it can be:

aoColumnDefs:这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了aoColumnDefs datatable 1.7)。这提供了很大的灵活性在创建表,因为aoColumnDefs数组可以是任意长度,目标是你特别想要的列。aTargets的属性是一个数组来目标众多列和每个元素在它可以:

• a string - class name will be matched on the TH for the column
• 0 or a positive integer - column index counting from the left
• a negative integer - column index counting from the right
• the string "_all" - all columns (i.e. assign a default)

aoColumns : If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.

aoColumnDefs参数和aoColumns可以一起使用,尽管aoColumnDefs优先aoColumns的灵活性。 如果两者都使用,aoColumns定义将最高优先级。同样,如果相同的列的目标是在aoColumnDefs多次,第一个元素的数组将最高优先级,最后一个最低的。

aDataSort：定义一个列或多个列自定义排序

Default:	null Takes the value of the column index automatically
Type:	array

asSorting：控制列的升序或降序到自定义列

Default:	[ 'asc', 'desc' ]
Type:	array

bSearchable：设置列是否能被快速检索框搜索到

Default:	true
Type:	boolean

bSortable： 启用或禁用列排序。

Default:	true
Type:	boolean

bUseRendered ：高版本已经废弃这个属性，没有使用过，直接翻译吧！当使用fnRender()为一个列,您可能希望使用原始的数据(在呈现之前)进行排序和过滤(默认是用于呈现的数据,用户可以看到)。这可能是有用的日期等。请注意,该选项已被弃用,将被删除的下一个版本的datatable。请用mRender / mData而不是fnRender。

Default:	true
Type:	boolean

无例子代码；
bVisible： 启用或禁用本列显示。

Default:	true
Type:	boolean

fnCreatedCell： 开发人员可定义的函数,就会调用一个细胞被创建(Ajax源等)或处理输入(DOM源)。这可以作为一种恭维,mRender允许您修改DOM元素(例如添加背景颜色)当元素是可用的。

Default:
Type:	function

fnRender： 高版本已经废弃这个属性。mRender这个代替

iDataSort： 列索引(从0开始!),你想要执行一个在本专栏时被选中进行排序。这可以用于排序在隐藏列例如。这个也没使用过

Default:	-1 Use automatically calculated column index
Type:	int

mData： 这个属性可以用来读取JSON数据从任何数据源属性,包括深层嵌套对象/属性。可以给mData在许多不同的方面影响其行为:

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source.
• null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such
  as edit / delete action columns.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  • {array|object} The data source for the row
  • {string} The type call data requested - this will be 'set' when setting data or 'filter', 'display', 'type', 'sort' or undefined when gathering data. Note that when undefined is given for the type DataTables
    expects to get the raw data for the object back
  • {*} Data to set when the second parameter is 'set'.

  The return value from the function is not required when 'set' is the type of call, but otherwise the return is what will be used for the data requested.

Default:	null Use automatically calculated column index
Type:	string

mRender ：This property is the rendering partner to mData and it is suggested that when you want to manipulate data for display (including filtering, sorting etc) but not altering the underlying data for the table, use this property. mData can
actually do everything this property can and more, but this parameter is easier to use since there is no 'set' option. Like mData is can be given in a number of different ways to effect its behaviour, with the addition of supporting array syntax for easy outputting
of arrays (including arrays of objects):

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader
  should loop over the data source array. When characters are given between the array brackets, these characters are used to join the data source array together. For example: "accounts[, ].name" would result in a comma separated list with the 'name' value from
  the 'accounts' array of objects.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  • {array|object} The data source for the row (based on mData)
  • {string} The type call data requested - this will be 'filter', 'display', 'type' or 'sort'.
  • {array|object} The full data source for the row (not based on mData)

  The return value from the function is what will be used for the data requested.

Default:	null Use mData
Type:	string

sCellType： Change the cell type created for the column - either TD cells or TH cells. This can be useful as TH cells have semantic meaning in the table body, allowing them to act as a header for a row (you may wish to add scope='row' to the
TH elements).

Default:	td
Type:	string

sClass：给列加上自己定义的属性

Default:	Empty string
Type:	string

sContentPadding ：When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is
much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value
to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation

Default:	Empty string
Type:	string

sDefaultContent ：Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mData is set to null, or because the data source itself is null).

Default:	null
Type:	string

sName： This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables
to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

Default:	Empty string
Type:	string

sSortDataType ：Defines a data source type for the sorting which can be used to read real-time information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such
as form inputs.

Default:	std
Type:	string

sTitle ：The title of this column.

Default:	null Derived from the 'TH' value for this column in the original HTML table.
Type:	string

sType： The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's
Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

Default:	null Auto-detected from raw data
Type:	string

sWidth： Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applies 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

Default:	null Automatic
Type:	string

三：回调

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 has finished its initialisation.' ); } } ); } ) 复制代码 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 ) { // Bold the grade for all 'A' grade browsers 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; // Send an Ajax request to the server to get the data. Note that // this is a synchronous request. $.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 = ""; } } ); } ); 复制代码