您的位置:首页 > 其它

简单分页

2015-09-08 17:19 260 查看
分页对象
pageDto:
package nnnmc.auditor.datacenter.dto;

public class PageDTO {

/**
* 总记录数
*/
private int itemCount;
/**
* 当前页码
*/
private int pageCurrent = 1;
/**
* 每页显示记录数
*/
private int pageSize = 10;
/**
* 总页数
*/
private int pageCount;
/**
* 是否首页
*/
private boolean hasPre;
/**
* 是否尾页
*/
private boolean hasNext;

public PageDTO(int itemCount, int pageCurrent, int pageSize) {
this.itemCount = itemCount;
this.pageSize = pageSize;
this.pageCount=(itemCount % pageSize == 0) ? itemCount/pageSize :itemCount/pageSize+1;
this.pageCurrent=pageCurrent>pageCount?pageCount:pageCurrent;
if(this.pageCurrent<1){
this.pageCurrent=1;
}
this.hasPre=pageCurrent>1;
this.hasNext=pageCurrent<pageCount;
}

public PageDTO() {
super();
}

public int getItemCount() {
return this.itemCount;
}

public int getPageCurrent(){
return this.pageCurrent;
}

public int getPageSize() {
return this.pageSize;
}

public int getPageCount() {
return this.pageCount;
}

public boolean getHasPre(){
return this.hasPre;
}

public boolean getHasNext(){
return this.hasNext;
}

public void setItemCount(int itemCount) {
this.itemCount = itemCount;
}

public void setPageCurrent(int pageCurrent) {
this.pageCurrent = pageCurrent == 0?1:pageCurrent;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize < 1 ? 10:pageSize;
}

public void setPageCount() {
this.pageCount = this.itemCount % this.pageSize == 0 ? this.itemCount/this.pageSize :this.itemCount/this.pageSize+1;
}

public void setHasPre() {
this.hasPre=this.pageCurrent>1;
}

public void setHasNext() {
this.hasNext=this.pageCurrent<this.pageCount;
}

@Override
public String toString() {
return "PageDTO [itemCount=" + itemCount + ", pageCurrent="
+ pageCurrent + ", pageSize=" + pageSize + ", pageCount="
+ pageCount + ", hasPre=" + hasPre + ", hasNext=" + hasNext
+ "]";
}

}


CSS:
@CHARSET "UTF-8";

.pagination {
float: right;
padding: 5px;
}

.pagination span.disabled {
border: 1px solid #eee;
color: #ddd;
margin: 2px;
padding: 2px 5px;
}
.pagination span.current {
background-color: #006699;
border: 1px solid #006699;
color: #fff;
font-weight: bold;
margin: 2px;
padding: 2px 5px;
}
.pagination a, .pagination a:link, .pagination a:visited {
border: 1px solid #aaaadd;
color: #006699;
margin: 2px;
padding: 2px 5px;
text-decoration: none;
cursor: pointer;
}
.pagination a:hover, .pagination a:active {
border: 1px solid #006699;
color: #000;
text-decoration: none;
}
div#content {
text-align: left;
}


JS:
1,第一种:分页元素(即点击的其它页,如上一页之类的)直接onclick执行一个方法;
//显示分页
function showPage(pageObj){
var pagehtml="";
if(pageObj.hasPre){
pagehtml+="<a class='href_page'  onclick='pageRequest("+eval(pageObj.pageCurrent-1)+")'> 上一页</a>";
}else{
pagehtml+="<span class='disabled prev_page'> 上一页</span>";
}

//如果小于10页
if(pageObj.pageCount<=10){
for(var i=1;i<=pageObj.pageCount;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page' onclick='pageRequest("+i+")'>"+i+"</a>";
}
}
}

//大于10页
if(pageObj.pageCount>10){
if(pageObj.pageCurrent<6){
for(var i=1;i<=pageObj.pageCurrent+1;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page' onclick='pageRequest("+i+")'>"+i+"</a>";
}
}
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+eval(pageObj.pageCount-1)+")'>"+eval(pageObj.pageCount-1)+"</a>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+pageObj.pageCount+")'>"+pageObj.pageCount+"</a>";
}
if(pageObj.pageCurrent>5&&pageObj.pageCurrent<pageObj.pageCount-5){
pagehtml+="<a class='href_page' onclick='pageRequest(1)'>"+1+"</a>";
pagehtml+="<a class='href_page'  onclick='pageRequest(2)'>"+2+"</a>";
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+eval(pageObj.pageCurrent-1)+")'>"+eval(pageObj.pageCurrent-1)+"</a>";
pagehtml+="<span class='current'>"+pageObj.pageCurrent+"</span>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+eval(pageObj.pageCurrent+1)+")'>"+eval(pageObj.pageCurrent+1)+"</a>";
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+eval(pageObj.pageCount-1)+")'>"+eval(pageObj.pageCount-1)+"</a>";
pagehtml+="<a class='href_page'  onclick='pageRequest("+pageObj.pageCount+")'>"+pageObj.pageCount+"</a>";
}
if(pageObj.pageCurrent>pageObj.pageCount-6){
pagehtml+="<a class='href_page' item='1'  onclick='pageRequest(1)'>"+1+"</a>";
pagehtml+="<a class='href_page' item='2'  onclick='pageRequest(2)'>"+2+"</a>";
pagehtml+="<span class='gap'>…</span>";
for(var i=pageObj.pageCurrent-1;i<=pageObj.pageCount;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page'  onclick='pageRequest("+i+")'>"+i+"</a>";
}
}
}
}

if(pageObj.hasNext){
pagehtml+="<a class='next_page'  onclick='pageRequest("+eval(pageObj.pageCurrent+1)+")'>下一页 </a>";
}else{
pagehtml+="<span class='disabled next_page'>下一页 </span>";
}
return pagehtml;
}

//点击分页页码执行函数,n表示点击的页码数(需要跳转的页码)
//将这个函数复制到所在网页中完善功能
//	function pageRequest(n){
//		console.log("pageRequert:"+n);
//	}


2,第二种:为每个元素绑定onclick监听事件,去执行一个方法;
$(function(){
//快速搜索分页
$("#quick_search_page").on("click","a",function(){
var currpage = $(this).attr("item");
console.log("session_page a:"+currpage)
quickSearch(currpage);
});
}

//显示分页
function showPage(pageObj){
var pagehtml="";
if(pageObj.hasPre){
pagehtml+="<a class='href_page'  item='"+eval(pageObj.pageCurrent-1)+"'> 上一页</a>";
}else{
pagehtml+="<span class='disabled prev_page'> 上一页</span>";
}

//如果小于10页
if(pageObj.pageCount<=10){
for(var i=1;i<=pageObj.pageCount;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page' item='"+i+"'>"+i+"</a>";
}
}
}

//大于10页
if(pageObj.pageCount>10){
if(pageObj.pageCurrent<6){
for(var i=1;i<=pageObj.pageCurrent+1;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page' item='"+i+"'>"+i+"</a>";
}
}
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  item='"+eval(pageObj.pageCount-1)+"'>"+eval(pageObj.pageCount-1)+"</a>";
pagehtml+="<a class='href_page'  item='"+pageObj.pageCount+"'>"+pageObj.pageCount+"</a>";
}
if(pageObj.pageCurrent>5&&pageObj.pageCurrent<pageObj.pageCount-5){
pagehtml+="<a class='href_page' item='1'>"+1+"</a>";
pagehtml+="<a class='href_page'  item='2'>"+2+"</a>";
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  item='"+eval(pageObj.pageCurrent-1)+"'>"+eval(pageObj.pageCurrent-1)+"</a>";
pagehtml+="<span class='current'>"+pageObj.pageCurrent+"</span>";
pagehtml+="<a class='href_page'  item='"+eval(pageObj.pageCurrent+1)+"'>"+eval(pageObj.pageCurrent+1)+"</a>";
pagehtml+="<span class='gap'>…</span>";
pagehtml+="<a class='href_page'  item='"+eval(pageObj.pageCount-1)+"'>"+eval(pageObj.pageCount-1)+"</a>";
pagehtml+="<a class='href_page'  item='"+pageObj.pageCount+"'>"+pageObj.pageCount+"</a>";
}
if(pageObj.pageCurrent>pageObj.pageCount-6){
pagehtml+="<a class='href_page' item='1' >"+1+"</a>";
pagehtml+="<a class='href_page' item='2' >"+2+"</a>";
pagehtml+="<span class='gap'>…</span>";
for(var i=pageObj.pageCurrent-1;i<=pageObj.pageCount;i++){
if(i==pageObj.pageCurrent){
pagehtml+="<span class='current'>"+i+"</span>";
}else{
pagehtml+="<a class='href_page'  item='"+i+"'>"+i+"</a>";
}
}
}
}

if(pageObj.hasNext){
pagehtml+="<a class='next_page'  item='"+eval(pageObj.pageCurrent+1)+"'>下一页 </a>";
}else{
pagehtml+="<span class='disabled next_page'>下一页 </span>";
}
return pagehtml;
}

function quickSearch(n){
$("#quick_search_page").empty();
$("#quick_search_page").append(pagehtml);
}


html:
<!-- 分页 -->
<div class="pagination" id="quick_search_page"></div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  分页