java中jquery datatable表格的使用

 这两天基于struts2的web项目需要报表排序功能，上网找了一些jquery的插件，找到了一个datatable。搞了两天，弄出个样子。但是导出功能不满足客户需求。所以暂时将该功能搁置了。自己在其中学了不少东西，现在整理整理。 
    开始，我的想法是通过ajax与数据库进行交换，进行排序。页面的代码。如下： 

Java代码  

1. function sortData(){  
2.     if (oTable == null) {  
3.             $("#exportTable").show();    
4.             oTable =  $('#exportTable').dataTable( {  
5.                 "aaSorting": [[4, 'desc']],  
6.                 "bProcessing": true,       //加载数据时显示正在加载信息   
7.                 "bServerSide": true,      //指定从服务器端获取数据  
8.                 "sAjaxSource": "" , //获取数据的ajax方法的URL  
9.                 "fnServerData":retrieveData //与后台交互获取数据的处理函数     
10.                   
11.             } );  
12.          }    
13.     oTable.fnDraw();     
14. }  
15. //函数的参数是固定，不能更改。  
16. function retrieveData( sSource, aoData, fnCallback ) {     
17.     //查询条件称加入参数数组     
18.     var year =document.getElementById('year').value;  
19.     var month =document.getElementById('month').value;  
20.     $.ajax( {     
21.         type: "POST",      
22.         //contentType: "application/json",   //这段代码不要加，我时延的是否后台会接受不到数据  
23.         url: sSource,   
24.         dataType:"json",  
25.         data:"jsonparam="+JSON.stringify(aoData)+"&year="+year+"&month="+month, //以json格式传递(struts2后台还是以string类型接受),year和month直接作为参数传递。  
26.         success: function(data) {   
27.            $("#url_sortdata").val(data.aaData);  
28.             fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式     
29.         }     
30.     });    
31. }   

jsp的页面元素 
必须要有[table thead （包含th） tbody ]（tfoot随意） 

Java代码  

1.     <table id="exportTable" width="100%" align='center'>  
2.                     <thead>  
3.                         <tr>  
4.                             <th  width ='10%' align='center'   ></th>  
5. <th  width ='10%' align='center'  ></th>  
6.                             <th  width ='10%' align='center'   ></th>  
7.                             <th  width ='10%' align='center'   ></th>  
8.                             <th  width ='10%' align='center'  ></th>  
9.                             <th  width ='10%' align='center'  ></th>  
10.                             <th  width ='10%' align='center'   ></th>  
11.                             <th  width ='10%' align='center' ></th>  
12.                         </tr>  
13.                     </thead>  
14.                     <tbody  align='center' style="line-height: 18px;border: 1px solid  #97bbdc;" >  
15.                       
16.                     </tbody>  
17.                     <tfoot>  
18.                         <tr>  
19.                             <th  width ='10%' align='center'  ></th>  
20.                             <th  width ='10%' align='center'  ></th>  
21.                             <th  width ='10%' align='center'   ></th>  
22.                             <th  width ='10%' align='center'   ></th>  
23.                             <th  width ='10%' align='center'  ></th>  
24.                             <th  width ='10%' align='center'   ></th>  
25.                             <th  width ='10%' align='center'   ></th>  
26.                             <th  width ='10%' align='center'   ></th>  
27.                         </tr>  
28.                     </tfoot>  
29.                 </table>  

后台的ajax方法： 

Java代码  

1. public String sortMonthData() {  
2.         HttpServletRequest request = ServletActionContext.getRequest();  
3.         HttpServletResponse response = ServletActionContext.getResponse();  
4.         JSONArray jsonobj = JSONArray.fromObject(jsonparam);  
5.         Object sEcho = (JSONObject.fromObject(jsonobj.get(0)).get("value"));//这里我只是测验将sEcho取出  
6.         ptp_list = 查询数据库获取的数据  
7.             //将查询内容数据,封装成JSONArray的数据对象.(这里还可以使用二维数组，反正需要注意页面接受到的数据格式是[[1,2,3,5],[1,2,3,5]])  
8.         JSONArray jsonDataArray = new JSONArray() ;  
9.         Collection map = null;  
10.         for (int i = 0; i < ptp_list.size(); i++) {  
11.             map =  ptp_list.get(i).values();  
12.             jsonDataArray.add(map);  
13.         }  
14.         //JSON对象，封装datatable使用到页面参数，[color=red]这几个参数是必须要[/color]的。  
15.         JSONObject returnjobj =  new  JSONObject();  
16.         returnjobj.put("sEcho", sEcho);  
17.         returnjobj.put("iTotalRecords", "1000");  
18.         returnjobj.put("iTotalDisplayRecords", "1000");  
19.         returnjobj.put("aaData",jsonDataArray);  
20.         //输出ajax返回值。  
21.         try {  
22.             response.getWriter().print(returnjobj.toString());  
23.             response.flushBuffer();  
24.         }catch (IOException e) {  
25.             // TODO Auto-generated catch block  
26.             e.printStackTrace();  
27.         } finally {  
28.             try {  
29.                 response.getWriter().close();  
30.             } catch (IOException e) {  
31.                 // TODO Auto-generated catch block  
32.                 e.printStackTrace();  
33.             }  
34.         }  
35.         return null;  
36.     }  

以上，是我通过ajax进行交互的例子。 
不过由于跟数据库交互的太多，自我推翻。