jquery datatables 的常见参数配置

1:导入包：

    URL：http://www.datatables.net/

   分别导入css和js文件

Html代码  

1. <</span>style type="text/css" title="currentStyle">  
2. @import "css/demo_page.css";  
3.   
4. @import "css/demo_table.css";  
5.   
6. @import "css/demo_table_jui.css";  
7. </</span>style>  
8. <</span>script type="text/javascript" language="javascript"  
9.     src="js/jquery.js"></</span>script>  
10.   
11. <</span>script type="text/javascript" language="javascript"  
12.     src="js/jquery.dataTables.js"></</span>script>  

 加载

Html代码  

1. <</span>script type="text/javascript">  
2.         $(document).ready(function() {  
3.             $('#example').dataTable();  
4.         });  
5.     </</span>script>  

 表单

Html代码  

1. <</span>div class="col_2_3_right">  
2.                 <</span>div class="index_viewport">  
3.                     <</span>table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">  
4.                         <</span>thead>  
5.                             <</span>tr>  
6.                                 <</span>th width="20%">First name</</span>th>  
7.                                 <</span>th width="20%">Last name</</span>th>  
8.                                 <</span>th width="35%">City</</span>th>  
9.                                 <</span>th width="25%">Date</</span>th>  
10.                             </</span>tr>  
11.                         </</span>thead>  
12.                     </</span>table>  
13.                 </</span>div>  
14.             </</span>div>  

问题：有时提示找不到datatable方法

原因

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

 从后台ajax得数据重建datatables（表单的id要与json的key一致）

Js代码  

1. $.ajax({  
2.                     　　type:'get',//可选get  
3.                     　　url:'${projectPath}/search',  
4.                     　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},  
5.                     　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
6.                     　　success:function(msg){  
7.                         var msgObj=JSON.parse(msg);  
8.                         //重新构建table  
9.                          $('#example').dataTable().fnClearTable();   //将数据清除  
10.                     　    $('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //数据必须是json对象或json对象数组  
11.                     　  
12.                 　　},  
13.                     　　error:function(){  
14.                     　　alert('error');  
15.                     　　}  
16.             })})  

传入的数据

Js代码  

1. //把服务器返回的数据转成datatable须要的格式  
2.         function packagingdatatabledata(msgObj){  
3.             var editHtml="编辑";  
4.             //var editHtml="编辑";  
5.             var a=[];  
6.             var tableName=['day','data','indata','edit'];  
7.             var banddata=storjson(msgObj['data']);  
8.             var bandindata=storjson(msgObj['indata']);  
9.             for(var key in banddata){  
10.                 var tempObj=new Object();  
11.                 tempObj.day=key;  
12.                 tempObj.data=banddata[key];  
13.                 tempObj.indata=bandindata[key];  
14.                 tempObj.edit=editHtml;  
15.                 a.push(JSON.parse(JSON.stringify(tempObj,tableName)));  
16.                 }  
17.             return a;  
18.         }  

 传入的是一个对象数组，每个对象代表一行，对象的属性即是列

单击时得到某行的值

   须要引入 jquery.dataTables.nightly.js  在附件中有  

Js代码  

1. $(document).ready(function() {  
2.       
3.     $('#example').dataTable();  
4. $('#example tbody tr').live('click', function () {  
5.                 var sTitle;  
6.                 var nTds = $('td', this);  
7.                 var sday = $(nTds[0]).text();  //得到第1列的值  
8.                 var sout = $(nTds[1]).text();  
9.                 var sin = $(nTds[2]).text();  
10.                   
11.             } );  
12.   
13. } );  

   

2：详细配置

Js代码  

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.                       
72.                     "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
73.                           
74.                         if (aData.ISADMIN == '1')  
75.                             $('td:eq(5)', nRow).html('管理员');  
76.                         if (aData.ISADMIN == '2')  
77.                             $('td:eq(5)', nRow).html('资料下载');  
78.                         if (aData.ISADMIN == '3')  
79.                             $('td:eq(5)', nRow).html('一般用户');  
80.                           
81.                         return nRow;  
82.                     },  
83.                       
84.                     "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),  
85.                         //服务器端，数据回调处理  
86.                             "fnServerData" : function(sSource, aDataSet, fnCallback) {  
87.                                 $.ajax({  
88.                                     "dataType" : 'json',  
89.                                     "type" : "POST",  
90.                                     "url" : sSource,  
91.                                     "data" : aDataSet,  
92.                                     "success" : fnCallback  
93.                                 });  
94.                             }  
95.                 });  
96.                   
97.                 $("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中  
98.                     $(docrTable.fnSettings().aoData).each(function() {  
99.                         $(this.nTr).removeClass('row_selected');  
100.                     });  
101.                     $(event.target.parentNode).addClass('row_selected');  
102.                     var aData = docrTable.fnGetData(event.target.parentNode);  
103.                       
104.                     $("#userId").val(aData.USERID);  
105.                     $("#userN").val(aData.USERNAME);  
106.                 });  
107.                   
108.                 $('#docrevisontable_filter').html('用户管理列表');  
109.                 $('#docrevisontable_filter').append('   ');  
110.                 $('#docrevisontable_filter').append('   ');  
111.                 $('#docrevisontable_filter').append('   ');  
112.                 $('#docrevisontable_filter').append('');  
113.         }  

 设置隐藏列

Js代码  

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

 刷新表中的数据(最后一个参数是否重绘表格，false你浏览到第二页不会刷跑到第一页，但数据不会改变)

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

 得到当前浏览的datatables页码

Js代码  

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.   
6. function Div(exp1, exp2) {  //整除  
7.     var n1 = Math.round(exp1); //四舍五入     
8.     var n2 = Math.round(exp2); //四舍五入    
9.   
10.     var rslt = n1 / n2; //除    
11.     if (rslt >= 0) {  
12.         rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。     
13.     }  
14.     else {  
15.         rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。     
16.     }  
17.     return rslt;  
18. }  

 设置datatables跳转到某页

Js代码  

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

 注意：由于后台数据可能已经被其它人改变（记录个数与现在前台不一致），所以数据fnUpdate时须要判断前后端数据的一致性，只刷 新前台有的数据的状态

dom:

http://datatables.net/release-datatables/examples/api/select_single_row.html 选择一行
http://datatables.net/release-datatables/examples/api/select_row.html选择多行
http://datatables.net/release-datatables/examples/api/editable.html 即时编辑行
http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html 多个tab
http://datatables.net/release-datatables/examples/api/add_row.html添加一行（静态）
http://datatables.net/release-datatables/examples/api/multi_filter.html多列搜索
http://datatables.net/release-datatables/examples/api/multi_filter_select.html多列搜索（扩展）
http://datatables.net/release-datatables/examples/api/highlight.html行列 高亮
http://datatables.net/release-datatables/examples/advanced_init/highlight.html 鼠标移上去亮
http://datatables.net/release-datatables/examples/api/row_details.html行详细信息
http://datatables.net/release-datatables/examples/api/counter_column.html添加行数
http://datatables.net/release-datatables/examples/api/show_hide.html隐藏列
http://datatables.net/release-datatables/examples/api/api_in_init.html点中即为搜索条件
http://datatables.net/release-datatables/examples/advanced_init/events_live.html 给每一个行添加事件显示行的信息
http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html鼠标事件 移到某一行显示信息
http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html 同上
http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html 用sdom属性控制插件位置
http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.htmlsdom应用
http://datatables.net/release-datatables/examples/advanced_init/length_menu.html更改按多少数据显示
http://datatables.net/release-datatables/examples/advanced_init/complex_header.html表头组
http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html按组显示行
http://datatables.net/release-datatables/examples/advanced_init/row_callback.html列回调函数
http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html总计（footer回调）
http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html自定义排序

http://datatables.net/release-datatables/examples/advanced_init/language_file.html国际化