`
扬州老鬼
  • 浏览: 302928 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

datatable 用法(1)

阅读更多
    这两天基于struts2的web项目需要报表排序功能,上网找了一些jquery的插件,找到了一个datatable。搞了两天,弄出个样子。但是导出功能不满足客户需求。所以暂时将该功能搁置了。自己在其中学了不少东西,现在整理整理。
    开始,我的想法是通过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进行交互的例子。
不过由于跟数据库交互的太多,自我推翻。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics