jQuery datatables使用 ( 封装类实现前台分页 二 续...)
愚盦 2011-10-12
封装的公用分页的工具类：
packagecom.sintai.util;
importjava.util.ArrayList;
importjava.util.List;
publicclassPageUtil<T>{
//分页静态不变属性
publicstaticfinalStringSIZE="size";//每页显示的记录数
publicstaticfinalStringCURPAGE="curPage";//总页数
privatelongtotal;
privateList<T>data=newArrayList<T>();
//省略setget方法
@Override
publicStringtoString(){
return"PageUtil[data="+data+",total="+total+"]";
}
}
后台Action：
/**
*分页时每页跨度数量
*/
privateStringparm_iDisplayStart;
/**
*DataTable请求服务器端次数
*/
privateStringparm_sEcho;
/**
*数组的数组，表格中的实际数据.
*/
privateString[][]aaData;
/**
*给前台的数据
*/
privateDataTableReturnObjecttableReturnObject=null;
/**
*传参
*/
privateStringparm_name;
//省略了getset方法
@Action("/findAllSite")
publicStringfindAllSite(){
List<SiteManagement>siteListPage=null;
inttotle=0;
try{
Map<String,Object>params=newHashMap<String,Object>();
intri=Integer.parseInt(parm_iDisplayStart);
intcup=(int)(ri/10)+1;
params.put(PageUtil.CURPAGE,cup);
params.put(PageUtil.SIZE,10);
PageUtil<SiteManagement>pageUtil=siteManagementManager.queryByPager(params,parm_name);
siteListPage=pageUtil.getData();
totle=(int)pageUtil.getTotal();
}catch(Exceptione){
e.printStackTrace();
return"updateUserERROR";
}
//resultArr数组封装了页面要显示的数据以及页面显示数据的各种格式
String[][]resultArr=newString[siteListPage.size()][];
for(inti=0;i<resultArr.length;i++){
String[]resultOne=newString[4];
SiteManagementsite=siteListPage.get(i);
intoID=site.getSiteManagementID();
resultOne[0]="<inputtype='checkbox'name='organizationId'value='"+oID+"'onclick='sOrgaId("+i+")'/>";
resultOne[1]=site.getSiteName();
resultOne[2]=site.getSiteTel();
resultOne[3]=site.getSiteFax();
resultArr[i]=resultOne;
}
aaData=resultArr;
tableReturnObject=newDataTableReturnObject(totle,totle,parm_sEcho,aaData);
return"ajax";
}
前台分页显示页面：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>机构设置</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<%@includefile="../taglibs.jsp"%>
<scripttype="text/javascript"src="${ctx}/js/common/selectFun.js"></script>
<!—需要引入的固定样式和js文件-->
<linkrel="stylesheet"type="text/css"href="${ctx}/css/common/dialog.css">
<linkhref="${ctx}/css/common/style1.css"style="text/css"rel="stylesheet">
<linkrel="stylesheet"href="${ctx}/css/dataTables/demo_page.css"type="text/css"/>
<linkrel="stylesheet"href="${ctx}/css/dataTables/demo_table.css"type="text/css"/>
<scripttype="text/javascript"language="javascript"src="${ctx}/js/dataTables/jquery.dataTables.js"></script>
</head>
<body>
<!--显示区域-->
<fieldset>
<legend>机构管理</legend>
<formclass="feildsetclearfixdataForm">
<tableclass="gridtable"style="width:100%"id="organizationTable">
<thead><tr>
<thwidth="10%"align="center">
<inputtype="checkbox"/>
</th>
<thwidth="30%"align="center">机构名称</th>
<thwidth="30%"align="center">电话号码</th>
<thwidth="30%"align="center">传真</th>
</tr>
</thead>
<tbodyalign="center">
<!—自动接收后台数据，按规定格式显示-->
</tbody>
</table>
</form>
</fieldset>
</body>
<scripttype="text/javascript">
varsAjaxSource="findAllSite.action";
varaoColumns=[//设定各列宽度
{"sWidth":"10%"},
{"sWidth":"30%"},
{"sWidth":"30%"},
{"sWidth":"30%"}
];
variDisplayLength=10;
vartableid="#organizationTable";
varoTable;
/**
*后台分页
*/
functionretrieveData(sSource,aoData,fnCallback){
aoData.push({"name":"name","value":$("input[name='siteName']").val()});
for(vari=0;i<aoData.length;i++){
//alert(aoData[i].name);
aoData[i].name="parm_"+aoData[i].name.toString();
}
$.ajax({
type:"post",
dataType:'json',//接受数据格式
cache:false,
data:aoData,
url:sSource,
beforeSend:function(XMLHttpRequest){
//ShowLoading();
},
success:function(data,textStatus){
if(data.tableReturnObject.aaData==""){
alert("无相关数据,请刷新");
}
fnCallback(data.tableReturnObject);
},
complete:function(XMLHttpRequest,textStatus){
//HideLoading();
},
error:function(){
//请求出错处理
alert("error");
}
});
}
//“检索”按钮的处理函数
functionsearch(){
if(oTable==null){//仅第一次检索时初始化Datatable
oTable=$(tableId).dataTable({
"bAutoWidth":false,//不自动计算列宽度
"aoColumns":aoColumns,
"bSort":false,
"bProcessing":true,//加载数据时显示正在加载信息
"bServerSide":true,//指定从服务器端获取数据
"bFilter":false,//不使用过滤功能
"bLengthChange":false,//用户不可改变每页显示数量
"iDisplayLength":iDisplayLength,//每页显示10条数据
"sAjaxSource":sAjaxSource,
"fnServerData":retrieveData,//获取数据的处理函数
"sPaginationType":"full_numbers",//翻页界面类型
"headerClickable":false,
"sortable":false
});
}
}
search();
functionbtnSelect(){
$(".paginate_active").click();
}
</script></html>
完善：
DataTableReturnObject对象具体封装的是需要返回的数据，封装的具体属性如下publicclassDataTableReturnObject{
privatelongiTotalRecords;
privatelongiTotalDisplayRecords;
privateStringsEcho;
privateString[][]aaData;
publicDataTableReturnObject(longtotalRecords,longtotalDisplayRecords,
Stringecho,String[][]d){
this.iTotalRecords=totalRecords;
this.iTotalDisplayRecords=totalDisplayRecords;
this.sEcho=echo;
this.aaData=d;
}
publiclonggetiTotalRecords(){
returniTotalRecords;
}
publicvoidsetiTotalRecords(longiTotalRecords){
this.iTotalRecords=iTotalRecords;
}
publiclonggetiTotalDisplayRecords(){
returniTotalDisplayRecords;
}
publicvoidsetiTotalDisplayRecords(longiTotalDisplayRecords){
this.iTotalDisplayRecords=iTotalDisplayRecords;
}
publicStringgetsEcho(){
returnsEcho;
}
publicvoidsetsEcho(StringsEcho){
this.sEcho=sEcho;
}
publicString[][]getAaData(){
returnaaData;
}
publicvoidsetAaData(String[][]aaData){
this.aaData=aaData;
}
}
Jquery的dataTables分页：
实现的是页面分页，在后台查询每页现实的记录，直接在页面上显示当前页的信息，所以把分页方法封装成了PageUtil类，重复使用；页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的，页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;
注：
Jquery的dataTables分页有自动的分页标签和页面样式，只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签，此案例是按页数查，显示到前台页面上的值是在后台action里查出来本页之后的list，action里查出来的是当前页要显示的那部分数据
