`
txf2004
  • 浏览: 6831120 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery datatables使用(前台页面分页 2 与后台交互分页显示 续...)

 
阅读更多

封装的公用分页的工具类:

package com.sintai.util;

import java.util.ArrayList;

import java.util.List;

public class PageUtil<T> {

// 分页静态不变属性

public static final String SIZE = "size"; //每页显示的记录数

public static final String CURPAGE = "curPage"; //总页数

private long total;

private List<T> data = new ArrayList<T>();

//省略set get 方法

@Override

public String toString() {

return "PageUtil [data=" + data + ", total=" + total + "]";

}

}

后台Action:

/**

* 分页时每页跨度数量

*/

private String parm_iDisplayStart;

/**

* DataTable请求服务器端次数

*/

private String parm_sEcho;

/**

* 数组的数组,表格中的实际数据.

*/

private String[][] aaData;

/**

* 给前台的数据

*/

private DataTableReturnObject tableReturnObject = null;

/**

* 传参

*/

private String parm_name;

// 省略了get set 方法

@Action("/findAllSite")

public String findAllSite(){

List<SiteManagement> siteListPage=null;

int totle = 0;

try {

Map<String, Object> params = new HashMap<String, Object>();

int ri = Integer.parseInt(parm_iDisplayStart);

int cup = (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 (Exception e) {

e.printStackTrace();

return "updateUserERROR";

}

// resultArr数组封装了页面要显示的数据以及页面显示数据的各种格式

String[][] resultArr = new String[siteListPage.size()][];

for (int i = 0; i < resultArr.length; i++) {

String[] resultOne = new String[4]; //封装前台页面需要现实的数据

SiteManagement site = siteListPage.get(i);

int oID = site.getSiteManagementID();

resultOne[0] = "<input type='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 = new DataTableReturnObject(totle, totle, parm_sEcho, aaData);

return "ajax";

}

前台分页显示页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>机构设置</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<%@ include file="../taglibs.jsp" %>

<script type="text/javascript" src="${ctx}/js/common/selectFun.js"></script>

<!—需要引入的固定样式和js文件-->

<link rel="stylesheet" type="text/css"href="${ctx}/css/common/dialog.css">

<link href="${ctx}/css/common/style1.css" style="text/css" rel="stylesheet">

<link rel="stylesheet" href="${ctx}/css/dataTables/demo_page.css" type="text/css" />

<link rel="stylesheet" href="${ctx}/css/dataTables/demo_table.css" type="text/css" />

<script type="text/javascript" language="javascript" src="${ctx}/js/dataTables/jquery.dataTables.js"></script>

</head>

<body>

<!-- 显示区域 -->

<fieldset>

<legend>机构管理</legend>

<form class="feildset clearfix dataForm ">

<table class="gridtable" style="width:100%" id="organizationTable">

<thead>

<tr>

<th width="10%" align="center">

<input type="checkbox" />

</th>

<th width="30%" align="center">机构名称</th>

<th width="30%" align="center">电话号码</th>

<th width="30%" align="center"> 传真 </th>

</tr>

</thead>

<tbody align="center">

<!—自动接收后台数据,按规定格式显示-->

</tbody>

</table>

</form>

</fieldset>

</body>

<script type="text/javascript">

var sAjaxSource="findAllSite.action";

var aoColumns=[ //设定各列宽度

{"sWidth": "10%"},

{"sWidth": "30%"},

{"sWidth": "30%"},

{"sWidth": "30%"}

];

var iDisplayLength=10;

var tableId="#organizationTable";

var oTable;

/**

* 后台分页

*/

function retrieveData( sSource, aoData, fnCallback ) {

aoData.push({"name":"name","value":$("input[name='siteName']").val()});

for(var i=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");

}

});

}

//“检索”按钮的处理函数

function search() {

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();

function btnSelect(){

$(".paginate_active").click();

}

</script>

</html>

Jquery的dataTables分页:

实现的是页面分页,在后台查询每页现实的记录,直接在页面上显示当前页的信息,所以把分页方法封装成了PageUtil类,重复使用;页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的,页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;

注:Jquery的dataTables分页有自动的分页标签和页面样式,只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签,此案例是按页数查,显示到前台页面上的值是在后台action里查出来本页之后的list,action里查出来的是当前页要显示的那部分数据

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics