这两天基于struts2的web项目需要报表排序功能,上网找了一些jquery的插件,找到了一个datatable。搞了两天,弄出个样子。但是导出功能不满足客户需求。所以暂时将该功能搁置了。自己在其中学了不少东西,现在整理整理。
开始,我的想法是通过ajax与数据库进行交换,进行排序。页面的代码。如下:
jsp的页面元素
必须要有[table thead (包含th) tbody ](tfoot随意)
后台的ajax方法:
以上,是我通过ajax进行交互的例子。
不过由于跟数据库交互的太多,自我推翻。
开始,我的想法是通过ajax与数据库进行交换,进行排序。页面的代码。如下:
function sortData(){
if (oTable == null) {
$("#exportTable").show();
oTable = $('#exportTable').dataTable( {
"aaSorting": [[4, 'desc']],
"bProcessing": true, //加载数据时显示正在加载信息
"bServerSide": true, //指定从服务器端获取数据
"sAjaxSource": "" , //获取数据的ajax方法的URL
"fnServerData":retrieveData //与后台交互获取数据的处理函数
} );
}
oTable.fnDraw();
}
//函数的参数是固定,不能更改。
function retrieveData( sSource, aoData, fnCallback ) {
//查询条件称加入参数数组
var year =document.getElementById('year').value;
var month =document.getElementById('month').value;
$.ajax( {
type: "POST",
//contentType: "application/json", //这段代码不要加,我时延的是否后台会接受不到数据
url: sSource,
dataType:"json",
data:"jsonparam="+JSON.stringify(aoData)+"&year="+year+"&month="+month, //以json格式传递(struts2后台还是以string类型接受),year和month直接作为参数传递。
success: function(data) {
$("#url_sortdata").val(data.aaData);
fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式
}
});
}
jsp的页面元素
必须要有[table thead (包含th) tbody ](tfoot随意)
<table id="exportTable" width="100%" align='center'>
<thead>
<tr>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
</tr>
</thead>
<tbody align='center' style="line-height: 18px;border: 1px solid #97bbdc;" >
</tbody>
<tfoot>
<tr>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
<th width ='10%' align='center' ></th>
</tr>
</tfoot>
</table>
后台的ajax方法:
public String sortMonthData() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
JSONArray jsonobj = JSONArray.fromObject(jsonparam);
Object sEcho = (JSONObject.fromObject(jsonobj.get(0)).get("value"));//这里我只是测验将sEcho取出
ptp_list = 查询数据库获取的数据
//将查询内容数据,封装成JSONArray的数据对象.(这里还可以使用二维数组,反正需要注意页面接受到的数据格式是[[1,2,3,5],[1,2,3,5]])
JSONArray jsonDataArray = new JSONArray() ;
Collection map = null;
for (int i = 0; i < ptp_list.size(); i++) {
map = ptp_list.get(i).values();
jsonDataArray.add(map);
}
//JSON对象,封装datatable使用到页面参数,[color=red]这几个参数是必须要[/color]的。
JSONObject returnjobj = new JSONObject();
returnjobj.put("sEcho", sEcho);
returnjobj.put("iTotalRecords", "1000");
returnjobj.put("iTotalDisplayRecords", "1000");
returnjobj.put("aaData",jsonDataArray);
//输出ajax返回值。
try {
response.getWriter().print(returnjobj.toString());
response.flushBuffer();
}catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
response.getWriter().close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return null;
}
以上,是我通过ajax进行交互的例子。
不过由于跟数据库交互的太多,自我推翻。