分页CSS
.pagination{
margin: 20px auto 0;
width: 960px;
font-size:12px;
text-align: center;
}
.pagination a{
border:1px solid #CCCCCC;
color: #336CA9;
font-weight: bold;
margin-right: 3px;
padding: 2px 9px;
text-decoration: none;
cursor: pointer;
}
.pagination .all{
font-size: 14px;
margin-right: 10px;
}
.pagination .all b{
margin: 0 5px;
}
.pagination a:hover{
background-color: #1987CD;
color:#FFFFFF;
background-image: none;
}
.pagination .current{
color: #000000;
font-weight: bold;
margin-right: 3px;
padding: 2px 9px;
}
.pagination span.disabled{
border:1px solid #CCCCCC;
color: #336CA9;
font-weight: bold;
margin-right: 3px;
padding: 2px 9px;
}Java类封装
package com.rying.weibo.util;
import java.io.IOException;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.TagSupport;
import cn.com.rying.logs.RyingLogs;
public class PageTag extends TagSupport {
private static final long serialVersionUID = 5729832874890369508L;
private String url; // 请求URI
private int pageSize; // 每页要显示的记录数
private int currentPage; // 当前页号
private int pageRecordCount; // 总记录数
@Override
public int doStartTag() throws JspException {
int pageCount = (pageRecordCount + pageSize - 1) / pageSize; // 计算总页数
RyingLogs.infoLogs("url=" + url + "/pageSize=" + pageSize + "/currentPage=" + currentPage + "/count=" + pageRecordCount);
// 拼写要输出到页面的HTML文本
StringBuilder sb = new StringBuilder();
sb.append("\r\n\r\n");
if (pageRecordCount == 0) {
sb.append("没有可显示的数据\r\n");
} else {
// 页号越界处理
if (currentPage > pageCount) {
currentPage = pageCount;
}
if (currentPage < 1) {
currentPage = 1;
}
sb.append("\r\n");
// 把当前页号设置成请求参数
sb.append("\r\n");
sb.append("\r\n");
// 输出统计数据
sb.append("共").append(pageCount).append("页");
// 上一页处理
if (currentPage == 1) {
sb.append("首页").append("\r\n").append("上一页").append("\r\n");
} else {
sb.append("首页\r\n");
sb.append("上一页\r\n");
}
// 页面显示最大页码
int maxPage = 10;
int center = maxPage / 2;
int start = 0;
int end = 0;
// 最大页数不超过maxPage
if (pageCount center) {
// 尾部不够显示，总显示页码数量为maxPage
if (currentPage + center > pageCount) {
start = currentPage - (maxPage - (pageCount - currentPage)) + 1;
end = pageCount;
} else {
// 当前页控制显示为中间值
start = currentPage - center + 1;
end = currentPage + center;
}
} else {
// 当前页码不足最大显示的一半
start = 1;
end = maxPage;
}
}
for (int i = start; i <= end; i++) {
if (currentPage == i) { // 当前页号不需要超链接
sb.append("").append(i).append("\r\n");
} else {
sb.append("").append(i).append("\r\n");
}
}
// 下一页处理
if (currentPage == pageCount) {
sb.append("下一页").append("\r\n");
sb.append("尾页").append("\r\n");
} else {
sb.append("下一页\r\n");
sb.append("尾页\r\n");
}
sb.append("\r\n");
// 生成提交表单的JS
sb.append("\r\n");
}
sb.append("\r\n");
// 把生成的HTML输出到响应中
try {
pageContext.getOut().println(sb.toString());
} catch (IOException e) {
throw new JspException(e);
}
return SKIP_BODY; // 本标签主体为空,所以直接跳过主体
}
public void setUrl(String url) {
this.url = url;
}
public void setpageSize(int pageSize) {
this.pageSize = pageSize;
}
public void setcurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public void setpageRecordCount(int pageRecordCount) {
this.pageRecordCount = pageRecordCount;
}
}pagetld
0.9 p page com.rying.weibo.util.PageTag empty currentPage true true int pageRecordCount true true int pageSize true true int url true true java.lang.String
页面使用
头部引入
jquery ajax分页封装
/**
* jquery.pagination.js
*
* Author:Irwin.Ai
*
* Date: 2013-04-07
*/
(function($){
$.fn.pagination = function(options){
var opts = $.extend({}, $.fn.pagination.defaults, options);
return this.each(function(){
var $this = $(this);
/**
*计算总页数
*/
function calculatePages(data){
return ((data.total % opts.pageSize) == 0) ? Math.floor(data.total / opts.pageSize) : (Math.floor(data.total / opts.pageSize) + 1);
}
/**
*计算开始结束页码
*/
function getInterval(data){
// 页面显示最大页码
var maxPage = 10;
var center = maxPage / 2;
var start = 0;
var end = 0;
var pageCount = calculatePages(data);
// 最大页数不超过maxPage
if (pageCount center) {
// 尾部不够显示，总显示页码数量为maxPage
if (opts.currentPage + center > pageCount) {
start = opts.currentPage - (maxPage - (pageCount - opts.currentPage)) + 1;
end = pageCount;
} else {
// 当前页控制显示为中间值
start = opts.currentPage - center + 1;
end = opts.currentPage + center;
}
} else {
// 当前页码不足最大显示的一半
start = 1;
end = maxPage;
}
}
return [start,end];
}
/**
*选择页码，翻页
*/
function selectPage(page){
opts.currentPage = page;
draw();
}
/**
*填充显示链接html
*/
function draw(){
if(opts.ajax.url != null) {
var transData = ((opts.ajax.data == null) ? (new Object()) : opts.ajax.data);
transData.pageSize = opts.pageSize;
transData.currentPage = opts.currentPage;
$.ajax({
url : opts.ajax.url,
data : transData,
dataType : opts.ajax.dataType,
success : function(data){
opts.ajax.callback(data);
if(data == null || data == ""){
return;
}
if(data.total == undefined){
return;
}else{
//清空
$this.empty();
if(data.total == 0){
return;
}else{
//获取页码
var pageCount = calculatePages(data);
var interval = getInterval(data);
// 页号越界处理
if (opts.currentPage > opts.pageCount) {
opts.currentPage = pageCount;
}
if (opts.currentPage < 1) {
copts.currentPage = 1;
}
$this.append('共' + pageCount + '页');
if(opts.currentPage == 1){
$this.append('首页上一页');
} else {
$this.append('首页上一页');
}
for(var i = interval[0]; i <= interval[1]; i++){
if(opts.currentPage == i){
$this.append('' + i + '');
} else {
$this.append('' + i + '');
}
}
if(opts.currentPage == pageCount){
$this.append('下一页尾页');
} else {
$this.append('下一页尾页');
}
$(".first").bind("click",function(){
selectPage(1);
});
$(".end").bind("click",function(){
selectPage(calculatePages(data));
});
$(".pre").bind("click",function(){
selectPage(parseInt(opts.currentPage) - 1);
});
$(".next").bind("click",function(){
selectPage(parseInt(opts.currentPage) + 1);
});
$(".cur").bind("click", function(){
selectPage($(this).text());
});
}
}
}
});
}
}
draw();
});
};
$.fn.pagination.defaults = {
ajax : {
url : null, //url地址
data : null, // 数据，必须是对象
dataType : 'json', //数据类型
type : 'get', //提交类型
callback : function(){} //成功回调函数
},
pageSize : 5, //每页显示数量
currentPage : 1 //当前页
};
})(jQuery);
jquery调用
$(".pagination").pagination({
ajax : {
url : 'search.action',
dataType : 'json',
data : {"search":"test"},
callback : function(data){
//do something
}
},
pageSize : 5
});
页面效果
