jquery datatables api （转）

学习可参考：http://www.guoxk.com/node/jquery-datatables

                      http://yuemeiqing2008-163-com.iteye.com/blog/2006942

 

1:导入包：

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

   分别导入css和js文件

Html代码  

1. <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. </style>  
8. <script type="text/javascript" language="javascript"  
9.     src="js/jquery.js"></script>  
10.   
11. <script type="text/javascript" language="javascript"  
12.     src="js/jquery.dataTables.js"></script>  

 加载

Html代码  

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

 表单

Html代码  

1. <div class="col_2_3_right">  
2.                 <div class="index_viewport">  
3.                     <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">  
4.                         <thead>  
5.                             <tr>  
6.                                 <th width="20%">First name</th>  
7.                                 <th width="20%">Last name</th>  
8.                                 <th width="35%">City</th>  
9.                                 <th width="25%">Date</th>  
10.                             </tr>  
11.                         </thead>  
12.                     </table>  
13.                 </div>  
14.             </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="<a class='btn' data-toggle='modal' href='#modalbackdroptrue' >编辑</a>";  
4.             //var editHtml="<a class='btn' href='#modalbackdroptrue' data-toggle='modal' >编辑</a>";  
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.     /* Init DataTables */  
3. <