自己在做项目时用easyUI解决的分页的一些东西
/*分页的前台 user_show.jsp*/
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath%>R_Javascripts/lib/jquery-1.8.0.min.js">script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/css/default.css">
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/jquery.easyui.min.js">script>
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/ext/jquery.portal.js">script>
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/ext/jquery.cookie.js">script>
<script src="<%=basePath%>R_Views/user/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript">script>
<title>Insert title heretitle>
<script type="text/javascript">
var basePath="<%=basePath%>";
function addTab(title, url){
url=basePath+url;
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
script>
head>
<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick= "addTab('管沟成型进度','R_Views/sgjd/page/sgjd_list.jsp?j_type=管沟成型进度')">管沟成型进度a>
<a href="#" class="easyui-linkbutton" onclick="addTab('布管进度','R_Views/sgjd/page/sgjd_list.jsp?j_type=布管进度')">布管进度a>
<a href="#" class="easyui-linkbutton" onclick="addTab('焊接实时进度','R_Views/sgjd/page/sgjd_list.jsp?j_type=焊接实时进度')">焊接实时进度a>
<a href="#" class="easyui-linkbutton" onclick="addTab('补口补伤进度','R_Views/sgjd/page/sgjd_list.jsp?j_type=补口补伤进度')">补口补伤进度a>
<a href="#" class="easyui-linkbutton" onclick="addTab('管沟回填进度','R_Views/sgjd/page/sgjd_list.jsp?j_type=管沟回填进度')">管沟回填进度a>
<a href="#" class="easyui-linkbutton" onclick="addTab('待开发进度施工','R_Views/sgjd/page/sgjd_list.jsp?j_type=待开发进度施工')">待开发进度施工a>
div>
<div id="tt" class="easyui-tabs" style="width:1930px;height:900px;">
div>
html>
/*分页的前台 sgjd_list.jsp*/
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath%>R_Javascripts/lib/jquery-1.8.0.min.js">script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>R_Views/user/css/default.css">
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/jquery.easyui.min.js">script>
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/ext/jquery.portal.js">script>
<script type="text/javascript" src="<%=basePath%>R_Views/user/js/easyui/ext/jquery.cookie.js">script>
<script src="<%=basePath%>R_Views/user/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript">script>
<title>Insert title heretitle>
<script type="text/javascript">
function doAdd(){
$("#addWindow").window("open");
}
function doEdit(){
var rows = $('#tt').datagrid('getSelections');
if(rows.length <= 0){
$.messager.alert("提示信息",'请选择一条数据','info');
}else if(rows.length >1){
$.messager.alert("提示信息","别急,一条一条地来",'info');
}else {
$('#editForm').form('load',rows[0]);
$('#editWindow').window("open");
}
}
function doDelete(){
var rows = $('#tt').datagrid('getSelections');
if(rows.length <= 0){
$.messager.alert("提示信息","请选中要删除的数据",'info')
}else{
$.messager.confirm("提示信息","您确定要删除莫",function(a){
if(a){
var aa = new Array();
for(var i = 0;i aa.push(rows[i].f_id); } var ids = aa.join(); location.href ="http://localhost:21000/app-sjcj/R_action/sgjd/sgjd_delete.action?ids="+ids; } }) } } script> head> <body style="width:100%; height: 100%; background: url(./background_cloud.jpg) no-repeat;background-size: 100% 100%;background-attachment: fixed;overflow-x: auto;overflow-y: auto;"> <div style="width:100%; margin-top: 5px; font-size: 25px; text-align: center; vertical-align: middle; margin-top: 0px;"> <table id="tt" class="easyui-datagrid" style="width:1919px;height:890px"iconCls="icon-save" toolbar="#tb" pageList="[30,40,50]" pagination="true" rownumbers="true" url ="<%=basePath%>R_action/sgjd/sgjd_list.action?j_type=<%=request.getParameter("j_type")%>"> <thead> <tr> <th field="f_id" width="80" checkbox="true">th> <th field="j_type" width="200" align="center">施工类型th> <th field="j_danwei" width="200" align="center">施工单位th> <th field="j_starthao" width="200" align="center">开始桩号th> <th field="j_startpianyi" width="200" align="center">开始偏移量th> <th field="j_endhao" width="200" align="center">结束桩号th> <th field="j_endpianyi" width="200" align="center">结束偏移量th> <th field="j_informant" width="200" align="center">填报人th> <th field="j_date" width="200" align="center" >填报日期th> <th field="j_description" width="200" align="center">备注th> tr> thead> table> <div id="tb"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:doAdd()">增加a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" align="center" plain="true" onclick="javascript:doEdit()">修改a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" align="center" plain="true" onclick="javascript:doDelete()">删除a> div> div>
<div class="easyui-window" title="用户添加" id="addWindow" style="top:20px;left:200px"> <div style="height:31px"> <div class="datagrid-toolbar"> <a id="save" icon="icon-save" href="#" class="easyui-linkbutton">保存a> <script type="text/javascript"> $(function(){ $('#addWindow').window({ title: '用户添加', width: 600, modal: true, shadow: true, closed: true, height: 600, resizable:false }); $('#save').click(function(){ var v = $('#addForm').form('validate'); if(v){ $('#addForm').submit(); } }); }); script> div> div> <div style="padding:5px;"border="false"> <form id="addForm" method="post" action="<%=basePath%>R_action/sgjd/sgjd_add.action?j_type=<%=request.getParameter("j_type")%>"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">进度信息td> tr>
<tr> <td>施工单位td> <td> <input type="text" name="j_danwei" class="easyui-validatebox" /> td> tr> <tr> <td>开始桩号td> <td><input type="text" name="j_starthao" class="easyui-validatebox" />td> tr> <tr> <td>开始偏移量td> <td><input type="text" name="j_startpianyi" class="easyui-validatebox" />td> tr> <tr> <td>结束桩号td> <td><input type="text" name="j_endhao" class="easyui-validatebox" />td> tr> <tr> <td>结束偏移量td> <td><input type="text" name="j_endpianyi" class="easyui-validatebox" />td> tr> <tr> <td>填报人td> <td><input type="text" name="j_informant" class="easyui-validatebox" />td> tr> <tr> <td>填报日期td> <td><input type="text" name="j_date" class="easyui-datebox" />td> tr> <tr> <td>备注td> <td><input type="text" name="j_description" class="easyui-validatebox" />td> tr> table> form> div> div>
<div class="easyui-window" title="用户修改" id="editWindow" style="top:20px;left:200px"> <div style="height:31px"> <div class="datagrid-toolbar"> <a id="edit" icon="icon-save" href="#" class="easyui-linkbutton">保存a> <script type="text/javascript"> $(function(){ $('#editWindow').window({ title: '用户修改', width: 600, modal: true, shadow: true, closed: true, height: 600, resizable:false }); $('#edit').click(function(){ var v = $('#editForm').form('validate'); if(v){ $('#editForm').submit(); } }) }); script> div> div> <div style="padding:5px;"border="false"> <form id="editForm" method="post" action="<%=basePath%>R_action/sgjd/sgjd_edit.action"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">用户信息td> tr> <tr> <td><input type="hidden" name="f_id">td> tr> <tr> <td>进度类型td> <td><input type="text" name="j_type" class="easyui-validatebox" />td> tr> <tr> <td>施工单位td> <td> <input type="text" name="j_danwei" class="easyui-validatebox" /> td> tr> <tr> <td>开始桩号td> <td><input type="text" name="j_starthao" class="easyui-validatebox" />td> tr> <tr> <td>开始偏移量td> <td><input type="text" name="j_startpianyi" class="easyui-validatebox" />td> tr> <tr> <td>结束桩号td> <td><input type="text" name="j_endhao" class="easyui-validatebox" />td> tr> <tr> <td>结束偏移量td> <td><input type="text" name="j_endpianyi" class="easyui-validatebox" />td> tr> <tr> <td>填报人td> <td><input type="text" name="j_informant" class="easyui-validatebox" />td> tr> <tr> <td>填报日期td> <td><input type="text" name="j_date" class="easyui-datebox" />td> tr> <tr> <td>备注td> <td><input type="text" name="j_description" class="easyui-validatebox" />td> tr> table> form> div> div> body> html> /*分页的后台*/ PageBean pageBean = new PageBean(); String p = request.getParameter("page"); String r = request.getParameter("rows"); int page = Integer.valueOf(p); int rows = Integer.valueOf(r); pageBean.setCurrentPage(page); pageBean.setPageSize(rows); String sql1 = "select count(*) aa from t_user_info";//查询总条数的sql Map m2=db.searchToMap(sql1); int total = Integer.valueOf(m2.get("aa").toString()); pageBean.setTotal(total);//设置总条数 int firstResult=(pageBean.getCurrentPage()-1)*(pageBean.getPageSize()); //这个获取每页显示条数 int maxResults=pageBean.getPageSize()+firstResult; /*String sql = "SELECT * FROM(SELECT u.*,rownum rn FROM T_USER u) us WHERE us.rn > " + (page - 1) * rows + "AND us.rn <=" + page * rows;*/ /*String sql = "SELECT * FROM (SELECT F_ID,F_NAME,F_USERNAME,F_PASSWORD,F_DESC,F_TYPE,rownum rn FROM T_USER) us JOIN T_USER_INFO uu ON us.rn > " + (page - 1) * rows + "AND us.rn <=" + page * rows + "AND us.F_ID = uu.F_ID";*/ String sql ="SELECT * FROM (SELECT us.*,ROWNUM rn FROM T_USER us) tt JOIN T_USER_INFO uu ON tt.rn > " + firstResult + " AND tt.rn <=" + maxResults + " AND tt.F_ID = uu.F_ID"; ArrayList list = db.searchToMapList(sql); pageBean.setRows(list); try { JsonConfig jsonConfig = new JsonConfig(); String[] excludes = {"currentPage","pageSize"}; jsonConfig.setExcludes(excludes); JSONObject json = JSONObject.fromObject(pageBean,jsonConfig); response.getWriter().print(json.toString()); System.out.println(json.toString()); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return NONE; /*pageBean对象*/
import java.util.List;
import org.hibernate.criterion.DetachedCriteria;
public class PageBean {
private int currentPage;
private int pageSize;
private DetachedCriteria criteria;
//以上三个都是在action中封装到pageBean中的
//下面两条数据是在dao中封装到pageBean中的
private long total;//因为我们数据库中查到的list的条数就是long类型的
private List rows;
//封装离线查询的条件
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public DetachedCriteria getCriteria() {
return criteria;
}
public void setCriteria(DetachedCriteria criteria) {
this.criteria = criteria;
}
}