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



后台的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进行交互的例子。 
不过由于跟数据库交互的太多,自我推翻。

你可能感兴趣的:(java中jquery datatable表格的使用)