分頁CSS
[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;
}
.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類封裝
[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<span stype=\"align:center\" class=\"pagination\">\r\n");
if (pageRecordCount == 0) {
sb.append("<strong>沒有可顯示的數據</strong>\r\n");
} else {
// 頁號越界處理
if (currentPage > pageCount) {
currentPage = pageCount;
}
if (currentPage < 1) {
currentPage = 1;
}
sb.append("<form method=\"post\" action=\"\" ").append("name=\"qPagerForm\">\r\n");
// 把當前頁號設置成請求參數
sb.append("<input type=\"hidden\" name=\"").append("currentPage").append("\" value=\"").append(currentPage).append("\"/>\r\n");
sb.append("<input type=\"hidden\" name=\"").append("pageSize").append("\" value=\"").append(pageSize).append("\"/>\r\n");
// 輸出統計數據
sb.append("<label class=\"all\">共<b>").append(pageCount).append("</b>頁</label>");
// 上一頁處理
if (currentPage == 1) {
sb.append("<span class=\"disabled\">首頁").append("</span>\r\n").append("<span class=\"disabled\">上一頁").append("</span>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((1)).append(")\">首頁</a>\r\n");
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage - 1)).append(")\">上一頁</a>\r\n");
}
// 頁面顯示最大頁碼
int maxPage = 10;
int center = maxPage / 2;
int start = 0;
int end = 0;
// 最大頁數不超過maxPage
if (pageCount <= maxPage) {
start = 1;
end = pageCount;
} else {
// 如果當前頁超過最大顯示頁碼一半
if (currentPage > 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("<b class=\"current\">").append(i).append("</b>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append(i).append(")\">").append(i).append("</a>\r\n");
}
}
// 下一頁處理
if (currentPage == pageCount) {
sb.append("<span class=\"disabled\">下一頁").append("</span>\r\n");
sb.append("<span class=\"disabled\">尾頁").append("</span>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一頁</a>\r\n");
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((pageCount)).append(")\">尾頁</a>\r\n");
}
sb.append("</form>\r\n");
// 生成提交表單的JS
sb.append("<script language=\"javascript\">\r\n");
sb.append(" function turnOverPage(no){\r\n");
sb.append(" var qForm=document.qPagerForm;\r\n");
sb.append(" qForm.currentPage.value=no;\r\n");
// 獲取自定義屬性
sb.append(" qForm.action=\"").append(url).append("\";\r\n");
sb.append(" qForm.submit();\r\n");
sb.append(" }\r\n");
sb.append("</script>\r\n");
}
sb.append("</span>\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;
}
}
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<span stype=\"align:center\" class=\"pagination\">\r\n");
if (pageRecordCount == 0) {
sb.append("<strong>沒有可顯示的數據</strong>\r\n");
} else {
// 頁號越界處理
if (currentPage > pageCount) {
currentPage = pageCount;
}
if (currentPage < 1) {
currentPage = 1;
}
sb.append("<form method=\"post\" action=\"\" ").append("name=\"qPagerForm\">\r\n");
// 把當前頁號設置成請求參數
sb.append("<input type=\"hidden\" name=\"").append("currentPage").append("\" value=\"").append(currentPage).append("\"/>\r\n");
sb.append("<input type=\"hidden\" name=\"").append("pageSize").append("\" value=\"").append(pageSize).append("\"/>\r\n");
// 輸出統計數據
sb.append("<label class=\"all\">共<b>").append(pageCount).append("</b>頁</label>");
// 上一頁處理
if (currentPage == 1) {
sb.append("<span class=\"disabled\">首頁").append("</span>\r\n").append("<span class=\"disabled\">上一頁").append("</span>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((1)).append(")\">首頁</a>\r\n");
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage - 1)).append(")\">上一頁</a>\r\n");
}
// 頁面顯示最大頁碼
int maxPage = 10;
int center = maxPage / 2;
int start = 0;
int end = 0;
// 最大頁數不超過maxPage
if (pageCount <= maxPage) {
start = 1;
end = pageCount;
} else {
// 如果當前頁超過最大顯示頁碼一半
if (currentPage > 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("<b class=\"current\">").append(i).append("</b>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append(i).append(")\">").append(i).append("</a>\r\n");
}
}
// 下一頁處理
if (currentPage == pageCount) {
sb.append("<span class=\"disabled\">下一頁").append("</span>\r\n");
sb.append("<span class=\"disabled\">尾頁").append("</span>\r\n");
} else {
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一頁</a>\r\n");
sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((pageCount)).append(")\">尾頁</a>\r\n");
}
sb.append("</form>\r\n");
// 生成提交表單的JS
sb.append("<script language=\"javascript\">\r\n");
sb.append(" function turnOverPage(no){\r\n");
sb.append(" var qForm=document.qPagerForm;\r\n");
sb.append(" qForm.currentPage.value=no;\r\n");
// 獲取自定義屬性
sb.append(" qForm.action=\"").append(url).append("\";\r\n");
sb.append(" qForm.submit();\r\n");
sb.append(" }\r\n");
sb.append("</script>\r\n");
}
sb.append("</span>\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
[html]
<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">
<tlib-version>0.9</tlib-version>
<short-name>p</short-name>
<tag>
<name>page</name>
<tag-class>com.rying.weibo.util.PageTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>currentPage</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>pageRecordCount</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>pageSize</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>url</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag>
</taglib>
<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">
<tlib-version>0.9</tlib-version>
<short-name>p</short-name>
<tag>
<name>page</name>
<tag-class>com.rying.weibo.util.PageTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>currentPage</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>pageRecordCount</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>pageSize</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>int</type>
</attribute>
<attribute>
<name>url</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag>
</taglib>
頁面使用
頭部引入
[html]
<%@taglib prefix="p" uri="/page.tld" %>
<%@taglib prefix="p" uri="/page.tld" %>
[plain]
<div class="pagination">
<p:page pageSize="${pageSize}" currentPage="${currentPage}" url="searchStatus.action?nick=${nick }&content=${content }&topic=${topic }&weiboId=${weiboId }&sortType=${sortType }&startTime=${startTime }&endTime=${endTime }" pageRecordCount="${pageRecordCount}" />
</div>
<div class="pagination">
<p:page pageSize="${pageSize}" currentPage="${currentPage}" url="searchStatus.action?nick=${nick }&content=${content }&topic=${topic }&weiboId=${weiboId }&sortType=${sortType }&startTime=${startTime }&endTime=${endTime }" pageRecordCount="${pageRecordCount}" />
</div>
jquery ajax分頁封裝
[javascript]
/**
* 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 <= maxPage) {
start = 1;
end = pageCount;
} else {
// 如果當前頁超過最大顯示頁碼一半
if (opts.currentPage > 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('<lable class="all">共<b>' + pageCount + '</b>頁</label>');
if(opts.currentPage == 1){
$this.append('<span class="disabled">首頁</span><span class="disabled">上一頁</span>');
} else {
$this.append('<a href="javascript:void(0)" class="first">首頁</a><a href="javascript:void(0)" class="pre">上一頁</a>');
}
for(var i = interval[0]; i <= interval[1]; i++){
if(opts.currentPage == i){
$this.append('<b class="current">' + i + '</b>');
} else {
$this.append('<a href="javascript:void(0)" class="cur">' + i + '</a>');
}
}
if(opts.currentPage == pageCount){
$this.append('<span class="disabled">下一頁</span><span class="disabled">尾頁</span>');
} else {
$this.append('<a href="javascript:void(0)" class="next">下一頁</a><a href="javascript:void(0)" class="end">尾頁</a>');
}
$(".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.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 <= maxPage) {
start = 1;
end = pageCount;
} else {
// 如果當前頁超過最大顯示頁碼一半
if (opts.currentPage > 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('<lable class="all">共<b>' + pageCount + '</b>頁</label>');
if(opts.currentPage == 1){
$this.append('<span class="disabled">首頁</span><span class="disabled">上一頁</span>');
} else {
$this.append('<a href="javascript:void(0)" class="first">首頁</a><a href="javascript:void(0)" class="pre">上一頁</a>');
}
for(var i = interval[0]; i <= interval[1]; i++){
if(opts.currentPage == i){
$this.append('<b class="current">' + i + '</b>');
} else {
$this.append('<a href="javascript:void(0)" class="cur">' + i + '</a>');
}
}
if(opts.currentPage == pageCount){
$this.append('<span class="disabled">下一頁</span><span class="disabled">尾頁</span>');
} else {
$this.append('<a href="javascript:void(0)" class="next">下一頁</a><a href="javascript:void(0)" class="end">尾頁</a>');
}
$(".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調用
[javascript]
$(".pagination").pagination({
ajax : {
url : 'search.action',
dataType : 'json',
data : {"search":"test"},
callback : function(data){
//do something
}
},
pageSize : 5
});