datatable的使用

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);//隐藏列

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

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:这个数组允许您针对一个特定列,多个列,或者所有列,使用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：定义一个列或多个列自定义排序

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

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

bSortable：启用或禁用列排序。

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

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

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

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

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

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.

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.

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).

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

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

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).

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).

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.

sTitle ：The title of this column.

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.

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.