jQuery datatables使用 ( 封装类实现前台分页二续...)

最新推荐文章于 2021-05-17 15:09:46 发布

ABCJIECBA

最新推荐文章于 2021-05-17 15:09:46 发布

阅读量161

点赞数

分类专栏： JQuery AJax JavaScript 文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/ABCJIECBA/article/details/84046142

版权

JQuery 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

AJax

2 篇文章 0 订阅

订阅专栏

封装的公用分页的工具类：
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 + "' οnclick='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>

[color=red]<!—需要引入的固定样式和js文件-->[/color]
[color=red]<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>[/color]
</head>
<body>

<fieldset>
<legend>机构管理</legend>
<form class="feildset clearfix dataForm ">
<table class="gridtable" style="width:100%" [color=red]id="organizationTable[/color]">
[color=red]<thead>[/color] <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>
[color=red]</thead>
<tbody align="center">[/color]
<!—自动接收后台数据，按规定格式显示-->

[color=red]</tbody> [/color]

</table>
</form>
</fieldset>
</body>
[color=red]<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>[/color]</html>

[b][color=red]完善：

DataTableReturnObject 对象具体封装的是需要返回的数据，封装的具体属性如下[/color][/b]public class DataTableReturnObject {

private long iTotalRecords;
private long iTotalDisplayRecords;
private String sEcho;
private String[][] aaData;

public DataTableReturnObject(long totalRecords, long totalDisplayRecords,
String echo, String[][] d) {
this.iTotalRecords = totalRecords;
this.iTotalDisplayRecords = totalDisplayRecords;
this.sEcho = echo;
this.aaData = d;
}

public long getiTotalRecords() {
return iTotalRecords;
}

public void setiTotalRecords(long iTotalRecords) {
this.iTotalRecords = iTotalRecords;
}

public long getiTotalDisplayRecords() {
return iTotalDisplayRecords;
}

public void setiTotalDisplayRecords(long iTotalDisplayRecords) {
this.iTotalDisplayRecords = iTotalDisplayRecords;
}

public String getsEcho() {
return sEcho;
}

public void setsEcho(String sEcho) {
this.sEcho = sEcho;
}

public String[][] getAaData() {
return aaData;
}

public void setAaData(String[][] aaData) {
this.aaData = aaData;
}

}

[color=red][b]Jquery的dataTables分页：[/b][/color]
实现的是页面分页，在后台查询每页现实的记录，直接在页面上显示当前页的信息，所以把分页方法封装成了PageUtil类，重复使用；页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的，页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;
[color=red][b]注：[/b][/color]
Jquery的dataTables分页有自动的分页标签和页面样式，只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签，此案例是按页数查，显示到前台页面上的值是在后台action里查出来本页之后的list，action里查出来的是当前页要显示的那部分数据

ABCJIECBA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery datatables使用 ( 封装类实现前台分页二续...)

封装的公用分页的工具类：package com.sintai.util;import java.util.ArrayList;import java.util.List;public class PageUtil { // 分页静态不变属性 public static final String SIZE = "size"; //每页显示的记录数 public...
复制链接

扫一扫