jquery 前台数据分页

// JavaScript Document

$(document).ready(function(){

$('#page_break .num li:first').addClass('on')

$('#page_break .num li').click(function(){

//隐藏所有页内容

$("#page_break div[id^='page_']").hide()

//显示当前页内容。

if ($(this).hasClass('on')) {

$('#page_break #page_' + $(this).text()).show()

} else {

$('#page_break .num li').removeClass('on')

$(this).addClass('on')

$('#page_break #page_' + $(this).text()).fadeIn('normal')

}

})

})

首先你需要一个pageBean类，用来定义一些分页需要的数据！

public class PageBean<T>{

private int pageCount = 0 // 总页数

private List<T>pageData = null// 当前页数据集

private int pageSize = 10 // 每页大小

private int currentPage = 1// 当前页

private long totalRecord = 0 // 总记录数

private int beginIndex = 0 // 分页起始记录号

private int endIndex = 1 // 分页结束记录号

public int getPageCount() {

pageCount = (int)(totalRecord + pageSize -1)/pageSize

return pageCount

}

public void setPageCount(int pageCount) {

this.pageCount = pageCount

}

public List<T>getPageData() {

return pageData

}

public void setPageData(List<T>pageData) {

this.pageData = pageData

}

public int getPageSize() {

return pageSize

}

public void setPageSize(int pageSize) {

this.pageSize = pageSize

}

public int getCurrentPage() {

if (currentPage <1) {

currentPage = 1

}

return currentPage

}

public void setCurrentPage(int currentPage) {

this.currentPage = currentPage

}

public long getTotalRecord() {

if (totalRecord <0) {

totalRecord = 0

}

return totalRecord

}

public void setTotalRecord(long totalRecord) {

this.totalRecord = totalRecord

}

public int getBeginIndex() {

beginIndex = (currentPage - 1) * pageSize+1

return beginIndex

}

public void setBeginIndex(int beginIndex) {

this.beginIndex = beginIndex

}

public int getEndIndex() {

endIndex = currentPage * pageSize

return endIndex

}

public void setEndIndex(int endIndex) {

this.endIndex = endIndex

}

}

页面上，使用jQuery的Ajax发送后台请求信息:

$.ajax({

type:"post",

url:"requestPage",

dataType:"json",

data:{这里就是封装数据的地方，比如你要到第二页的时候，在这之前要读取当前的页数，并进行适当的判断，是键值对的形式例如:"current":1,"pageSize":10},

success:function(data){

这里是返回json字符串

var jsonObj=$(data)

然后解析遍历json

$.each(data.pageData,function(index,item){

这个回调函数里面的第一个参数是下标，第二个参数是集合里面的单个对象

然后生成显示…………结束

})

}

}):

你看这个思路是否可行：

你可以得到数据库的数组总条数 然后得到相应的总页数$page_all_number 大体代码如下：

php页面 应该有变量

$page_now_number = 1//初始页面时页面数为1

$page_all_number//数据的总页数

html页面

<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>

<script>

function show_page(e){ //显示对应page值的页面内容

$.post('调用的php文件',{'page':e},function(data){　

//如果返回正确的值

if(data!='0'){

$("#page_info").hmtl("")//先清空页面原有的内容

$("#page_info").hmtl(data)//给页面新的内容

}

})

}

function before_page(){ //上一页

var page_number = $("#page_number").val()//得到现在的显示的页面值

if(parseInt(page_number) - 1 <1){

alert('已经是第一页了')

return false

}

$.post('调用的php文件',{'page':page_number},function(data){　

//如果返回正确的值

if(data!='0'){

$("#page_number").val(parseInt(page_number) - 1)//因为是上一页的方面所以这页面的page值 应该 减 1

$("#page_info").hmtl("")//先清空页面原有的内容

$("#page_info").hmtl(data)//给页面新的内容

}

})

}

function next_page(){ //下一页

var page_number = $("#page_number").val()//得到现在的显示的页面值

if(parseInt(page_number) +1 <parseInt($("#page_all_number"))){

alert('已经是最后一页了')

return false

}

$.post('调用的php文件',{'page':page_number},function(data){　

//如果返回正确的值

if(data!='0'){

$("#page_number").val(parseInt(page_number) +1)//因为是下一页的方面所以这页面的page值 应该 加 1

$("#page_info").hmtl("")//先清空页面原有的内容

$("#page_info").hmtl(data)//给页面新的内容

}

})

}

</script>

<div id="page_info">

分页数据的内容(初始内容也应该在这里)

</div>

<input type="hidden" vlaue="1" id="page_number" />这里是点击事件变化后的页面值

<input type="hidden" vlaue="$page_all_number" id="page_all_number" />总页数

<a href="#" onclick="show_page(1)" >首页</a>

<a href="#" onclick="before_page()" />上一页</a>

<a href="#" onclick="next_page()" />下一页</a>

<a href="#" onclick="show_page($page_all_number)" />尾页</a>

希望上面的内容能帮到你

---