大家看见的分页无非是这样的,首页、上一页、1/1、下一页、末页、共几条、默认条数。
那么我们在页面传值的时候,只需要传当前页page,显示的页面条数pageRows,以及我们要查询的分类id---cateId,
页面会有一个隐藏域 <input type="hidden" value="${cateId }" name="cateId" id="cateId"/>来储存cateId;
下面为我们图的显示的html源码:
<div class="page" id="page">
<div class="toolbarScroll">
<s:hidden name="pageRequest.page" id="pagePage"/><!-- pagePage页得索引,id=forwardPageNum文本框输入的页数 ,-->
<input id="firstPage" οnclick="script:changePage('first')" <s:if test="pageRequest.page == 1">disabled="disabled"</s:if> value=" 首页 " type="button" />
<input id="beforePage" οnclick="script:changePage('previous')" <s:if test="pageRequest.page == 1">disabled="disabled"</s:if> value=" 上一页 " type="button" />
<input size="6" maxlength="3" id="forwardPageNum" class="formStylePage" οnblur="goToPointedPage()" value="<s:property value='pageRequest.page'/>" type="text" style="text-align: center;"/>/
<span class="currentPage" id="totalPage">
<s:property value="(pageResponse.totalCount - 1) / pageRequest.rows + 1"/>
</span>
<input id="nextPage" οnclick="script:changePage('next')" <s:if test="(pageRequest.page == ((pageResponse.totalCount - 1) / pageRequest.rows + 1))">disabled="disabled"</s:if> value=" 下一页 " type="button" />
<input id="lastPage" οnclick="script:changePage('last')" <s:if test="(pageRequest.page == ((pageResponse.totalCount - 1) / pageRequest.rows + 1))">disabled="disabled"</s:if> value=" 末页 " type="button" />
共<span id="totalCount"><s:property value="pageResponse.totalCount"/></span>条
<span>
<select id="pageRows" name="pageRequest.rows" οnchange="changeRows()"><!-- 每页显示条数 -->
<s:iterator value="pageResponse.PAGESIZES" status="s">
<option <s:if test="pageRequest.rows == pageResponse.PAGESIZES[#s.index]">selected="selected"</s:if> value="<s:property value="pageResponse.PAGESIZES[#s.index]"/>">
<s:if test="pageResponse.PAGESIZES[#s.index] == pageResponse.defaultPageSize">默认条数</s:if>
<s:else>每页<s:property value="pageResponse.PAGESIZES[#s.index]"/>条</s:else>
</option>
</s:iterator>
</select>
</span>
</div>
</div>
<div class="clearFloat"></div>
</div>
下方为初始化的时候的显示列表方法:
function listInfo(){
var cateId = $("#cateId").val();//分类id
var pagePage = $("#pagePage").val();//页的索引
var pageRows = $("#pageRows").val();//每页数据个数
$.ajax({
url: "${ctx}/system/seaSealspapersInfo/listJson.action",
data:{"pageRequest.page" : pagePage,"pageRequest.rows":pageRows,"cateId":cateId},
dataType: "json",
success: function(d){
var totalCount = d.totalCount; //获得总条数
var pageCount = totalCount % parseInt($("#pageRows").val()) == 0 ?
parseInt(totalCount/parseInt($("#pageRows").val())) :
parseInt(totalCount/parseInt($("#pageRows").val())) +1; //获得总页数
$("#totalPage").html(pageCount+''); //保存总页数
$("#totalCount").html(totalCount+''); //总数
if(pageCount == 1){ //如果只有一页,全部禁用
$("#beforePage").attr("disabled","disabled");
$("#firstPage").attr("disabled","disabled");
$("#nextPage").attr("disabled","disabled");
$("#lastPage").attr("disabled","disabled");
}else if($("#forwardPageNum").val() < pageCount){ //如果页数比总页数小,则下一页和末页能用
$("#nextPage").removeAttr("disabled");
$("#lastPage").removeAttr("disabled");
if($("#forwardPageNum").val() >1){ //如果页数大于1,说明 1<页数<总页数 说明全部都可用
$("#firstPage").removeAttr("disabled");
$("#beforePage").removeAttr("disabled");
}else{ //在页数比总页数小的其他情况下,就只存在一种就是等于1
$("#firstPage").attr("disabled","disabled"); //当等于1 的时候,首页和上一页不可用
$("#beforePage").attr("disabled","disabled");
}
} else{
$("#nextPage").attr("disabled","disabled");
$("#lastPage").attr("disabled","disabled");
}
var list = d.list;
$("#body").empty();
if(list.length == 0){
$("#body").append (
"<tr>" +
" <td colspan='10'>" +
" <span class='tip'>系统无记录!</span>" +
" </td>" +
"</tr>"
);
}else{
for(var i = 0;i<list.length;i++){
var updateTime = list[i].updateTime ? list[i].updateTime : '' ;
var updateUserName = list[i].updateUserName ? list[i].updateUserName : '';
var seacatename = "";
if(list[i].seaCategoryInfo != undefined){
if(list[i].seaCategoryInfo.catName != undefined){
seacatename = list[i].seaCategoryInfo.catName;
}
}
var seaStatus;
if(list[i].seaStatus == 1){
seaStatus = '可借用';
}else if(list[i].seaStatus == 0){
seaStatus = '已借出';
}else{
seaStatus = '注销';
}
$("#body").append(
"<tr>" +
"<td>" +
" <input name='ids' type='checkbox' value='" + list[i].id + "' /></td>" +
"<td>" +
" <span title='" + list[i].seaFullname + "'>" + list[i].seaFullname + "</span>" +
"</td>" +
"<td>" +
" <span title='" + list[i].seaShortname + "'>" + list[i].seaShortname + "</span>" +
"</td>" +
"<td>" +
" <span title='" + seacatename + "'>" + seacatename + "</span>" +
"</td>" +
"<td>" + list[i].seaValiditystartdate + "---" + list[i].seaValidityenddate + "</td>" +
"<td>" + seaStatus + "</td>" +
"<td>" + list[i].createUserName + "</td>" +
"<td>" + list[i].createTime + "</td>" +
"<td>" + updateUserName + "</td>" +
"<td>" + updateTime + "</td>" +
"</tr>"
);
}
}
}
});
}
下面为点击按钮的时候的具体方法:
function changePage(pageTitle) {
if(pageTitle == "previous"){
$("#nextPage").removeAttr("disabled"); //如果点击上一页,就让下一页的按钮可以用
$("#lastPage").removeAttr("disabled"); //如果点击上一页,就让尾页的按钮可用
$('#pagePage').val(parseInt($('#pagePage').val()) - 1);
if($("#pagePage").val() == 1){ //点击上一页时,如果页变为1。上一页和首页不可用
$("#beforePage").attr("disabled","disabled");
$("#firstPage").attr("disabled","disabled");
}
}else if(pageTitle == "next"){
$("#beforePage").removeAttr("disabled"); //如果点击下一页,就让上一页的按钮可用
$("#firstPage").removeAttr("disabled"); //如果点击下一页,就让首页的按钮可用
$('#pagePage').val(parseInt($('#pagePage').val()) + 1);
var pagecount = parseInt($("#totalPage").html());
if(parseInt($("#pagePage").val()) == pagecount){ //如果点击下一页后成了最后一页,尾页和下一页不可用
$("#nextPage").attr("disabled","disabled");
$("#lastPage").attr("disabled","disabled");
}
}else if(pageTitle == "first"){
$('#pagePage').val(1);
$("#beforePage").attr("disabled","disabled"); //如果点击首页按钮,上一页按钮按钮不可用
$("#firstPage").attr("disabled","disabled"); //如果点击首页按钮,首页按钮不可用
$("#nextPage").removeAttr("disabled"); //下一页按钮可用
$("#lastPage").removeAttr("disabled"); //尾页按钮可用
}else if(pageTitle == "last"){
$('#pagePage').val($("#totalPage").html()); //点击尾页,将当前页数改为最大页数
$("#nextPage").attr("disabled","disabled"); //如果点击尾页按钮,下一页按钮不可用
$("#lastPage").attr("disabled","disabled"); //如果点击尾页按钮,尾页按钮不可用
$("#firstPage").removeAttr("disabled"); //首页按钮可用
$("#beforePage").removeAttr("disabled"); //上一页可用
}
$("#forwardPageNum").val($("#pagePage").val());
listInfo();
}
下面为选择显示条数时的方法:
function goToPointedPage(){
var pointedPageNum = $('#forwardPageNum').val(); //获得文本框输入的页数
var totalPage = $("#totalPage").html(); //获取总页数
var patrn = /^\+?[1-9][0-9]*$/;
if(!patrn.exec(pointedPageNum)){
alert('页数请输入正整数');
return;
}
if(parseInt(pointedPageNum) > parseInt(totalPage)){
alert('输入页数不得超过最大页数');
return;
}
$('#pagePage').val(parseInt(pointedPageNum));
if(pointedPageNum == 1){
$("#beforePage").attr("disabled","disabled");
$("#firstPage").attr("disabled","disabled");
}
if(pointedPageNum == totalPage){
$("#nextPage").attr("disabled","disabled");
$("#lastPage").attr("disabled","disabled");
}
listInfo();
}
function changeRows(){
$('#pagePage').val(1); //当选择默认页数改变的时候,当前页数改为1
listInfo();
}
/**
*
* @author yijh
* 获取分页对象
*
*/
public class PageRequest {
private int rows;//每页大小
private int page = 1;//页号
private String sort;//排序字段
private String order;//顺序
public PageRequest() {
rows = Integer.parseInt(SystemConfig.getProperty("defaultPageSize"));
}
public PageRequest(int rows) {
super();
this.rows = rows;
}
public PageRequest(int rows, String sort,
String order) {
super();
this.rows = rows;
this.sort = sort;
this.order = order;
}
private int start = 0;
private int limit ;
public int getStart() {
start = (this.page - 1) * this.rows;
return start;
}
public int getLimit() {
return this.rows;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
}
package com.ether.common.page;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.lang.builder.ToStringBuilder;
import org.apache.commons.lang.builder.ToStringStyle;
import com.ether.common.config.SystemConfig;
import com.ether.util.Constant;
/**
*
* @author yijh
* 分页程序生成的分页对象
* @param <E>
*/
public class PageResponse<E> implements Serializable{
private long totalCount;
private long start;
private long end;
private List<E> list;
private int defaultPageSize;
private int[] PAGESIZES;
public PageResponse(long totalCount, List<E> list) {
super();
this.totalCount = totalCount;
this.list = list;
}
public PageResponse() {
super();
this.totalCount = 0;
defaultPageSize = Integer.parseInt(SystemConfig.getProperty("defaultPageSize"));
this.list = new ArrayList<E>();
PAGESIZES = new int[]{Integer.parseInt(SystemConfig.getProperty("defaultPageSize")),50,100};
}
public PageResponse(PageRequest pageRequest) {
super();
this.totalCount = 0;
this.list = new ArrayList<E>();
}
public long getTotalCount() {
return totalCount;
}
public void setTotalCount(long totalCount) {
this.totalCount = totalCount;
}
public List<E> getList() {
return list;
}
public void setList(List<E> list) {
this.list = list;
}
@Override
public String toString() {
return ToStringBuilder.reflectionToString(this,
ToStringStyle.MULTI_LINE_STYLE);
}
public long getStart() {
return start;
}
public void setStart(long start) {
this.start = start;
}
public long getEnd() {
return end;
}
public void setEnd(long end) {
this.end = end;
}
public int[] getPAGESIZES() {
return PAGESIZES;
}
public int getDefaultPageSize() {
return defaultPageSize;
}
}