张彦杰
- 浏览: 54769 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
封装的公用分页的工具类：
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>
完善：
DataTableReturnObject 对象具体封装的是需要返回的数据，封装的具体属性如下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;
}
}
Jquery的dataTables分页：
实现的是页面分页，在后台查询每页现实的记录，直接在页面上显示当前页的信息，所以把分页方法封装成了PageUtil类，重复使用；页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的，页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;
注：
Jquery的dataTables分页有自动的分页标签和页面样式，只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签，此案例是按页数查，显示到前台页面上的值是在后台action里查出来本页之后的list，action里查出来的是当前页要显示的那部分数据
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>
完善：
DataTableReturnObject 对象具体封装的是需要返回的数据，封装的具体属性如下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;
}
}
Jquery的dataTables分页：
实现的是页面分页，在后台查询每页现实的记录，直接在页面上显示当前页的信息，所以把分页方法封装成了PageUtil类，重复使用；页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的，页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;
注：
Jquery的dataTables分页有自动的分页标签和页面样式，只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签，此案例是按页数查，显示到前台页面上的值是在后台action里查出来本页之后的list，action里查出来的是当前页要显示的那部分数据
分享到：
发表评论
-
JS--事件
2012-04-09 11:37 10001.js退出当前页面，一般常用于做系统登录的退出： c ... -
页面图片浮动左右滑动效果实现案例
2012-04-09 11:35 1223核心代码： 1.css：16sucai.css ht ... -
JS前端验证(验证页面属性格式)
2012-03-19 10:11 943@param:做验证的正则表达式 /^([a-zA-Z0- ... -
正则表达式---手机，邮箱，固定电话格式的验证
2011-11-23 17:53 6566<script type="text/java ... -
jQuery datatables使用 ( 封装类实现前台分页 二 续...)
2011-10-12 10:57 0封装的公用分页的工具 ... -
页面自动加载方法
2011-10-10 11:06 2086示例1： Window.onload=function(){ ... -
Dom与JavaScript
2011-10-10 11:01 8221.javaScript 基本概念： Ja ... -
jQuery datatables使用 ( 前台页面实现分页 简单案例一 未完待续...)
2011-09-29 14:37 2898<%@ page language="java ... -
jQuery datatables使用 ( 前台页面实现分页 )
2011-09-29 14:37 1<%@ page language="java ... -
JQuery验证jsp页面属性是否为空
2011-09-21 14:08 1067说明：验证是否为空的前提首先要保证是在提交form之前验证的， ... -
JQuery的Ajax请求实现局部刷新(邮件读取状态，图标的改变)：
2011-08-05 16:31 3209SSH:请求的ajax路径传递的参数(data)会到act ... -
AJax案例(分别调用get ,post方法)
2011-08-01 17:01 1202被引用的util.js源码： function $(id){ ... -
JQuery小结
2011-07-28 16:03 696一. JQuery概述 Jquery是一个优秀的Javascr ...
相关推荐
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
**jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库，用于增强HTML表格。它提供了各种高级特性，如分页、排序、过滤、搜索、数据加载以及更多，大大提升了用户体验。在这...
2. **CSS 文件**: DataTables 提供了预设的样式文件（如 `dataTables.bootstrap.css` 或 `dataTables.foundation.css`），这些文件用于美化表格的显示效果，使其适应不同的前端框架（如Bootstrap、Foundation等）。...
通过学习和使用`Mvc.JQuery.Datatables`，开发者不仅可以快速地在.NET MVC应用中实现复杂的数据表格功能，还能借此机会深入理解前端和后端交互的工作原理，提升Web开发技能。在实际开发中，可以根据项目需求自定义...
jquery.dataTables.min.js是使用Datatable插件时用的脚本文件
通过以上知识点的讲解，我们可以看到Spring Boot、MybatisPlus和JQuery DataTables的结合使用，可以高效地实现数据展示、分页和模糊查询功能，是现代企业级Web应用中的常见实践。在实际开发中，还需要根据具体需求...
这些文件通常包括`jquery.dataTables.min.js` 和 `dataTables.bootstrap.min.css` 等，它们提供了基本的功能和视觉样式。在HTML表格后，通过调用`.DataTable()` 方法来初始化插件，例如：`$('table').DataTable();`...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页，同时结合Java后端进行数据的动态查询和分页处理。 首先，让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时，仅加载当前显示的数据，...
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， ...
仿jquery.dataTables的分页（查询+排序）,jquery插件式开发简单示例。
本文将深入探讨使用jQuery实现简单前台表格分页的插件——`paginathing.js`。 首先，我们需要了解`jQuery`库。jQuery是由John Resig于2006年创建的，它的目标是使JavaScript编程变得简单、快捷。它通过提供简洁的...
1，这个项目是strut2.0 + hibernate3.0 + jquery.datatables+mysql 5.0实现的 hibernate分页（无排序，搜索，仅仅分页显示）,服务器端分页在datatables上展现，有关 datatables的知识请关注它的官网...
在提供的文件中，`jquery.dataTables.js`和`jquery.dataTables-1.7.5.js`是两个主要的JavaScript库，分别代表了DataTables的不同版本。这两个版本可能有不同的功能特性和API，开发者应根据项目需求选择合适的版本。...
<script type="text/javascript" src="jquery.dataTables.js"> <th>Name <th>Position <th>Office <th>Age <th>Start date <th>Salary <!-- 表格数据 --> $(document).ready(function...
对于Java初学者来说，这是一个很好的实践项目，可以帮助他们理解如何结合使用SpringBoot、MyBatis、JSP、jQuery和DataTables.js来实现一个功能完备的前端分页搜索系统。通过学习和实践这个教程，开发者可以提升自己...
1. **样式兼容**：DataTables提供了Bootstrap主题，只需在CSS引用中加入对应的Bootstrap CSS，如`dataTables.bootstrap.min.css`，确保表格样式与Bootstrap保持一致。 2. **按钮扩展**：DataTables有内置的按钮插件...
1. **引入资源**：在HTML文件中引入jQuery库（如jquery-1.6.4.min.js）和DataTables脚本文件（通常为`jquery.dataTables.min.js`）以及对应的CSS文件。 2. **初始化表格**：通过JavaScript选择需要转换的表格元素，...
**二、使用步骤** 1. **引入依赖**：在HTML文件中引入jQuery库和DataTables的CSS和JS文件。 2. **初始化表格**：通过`$(document).ready()`函数选择表格元素，并调用`DataTable()`方法进行初始化。 3. **配置选项**...
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...