jquery怎么动态实现表格分页

jquery动态实现表格分页的方法是利用自带的分页插件jQuery.page.js。

下面是使用方法：

$(".tcdPageCode").createPage({

      pageCount:10,

      current:1,

      backFn:function(p){

          //单击回调方法，p是当前页码

      }

  })

  pageCount：总页数

  current：当前页

实现分页的tab如下：

<div class="tcdPageCode">

<span class="disabled">上一页</span>

<span class="current">1</span>

<a href="javascript:" class="tcdNumber">2</a>

<a href="javascript:" class="tcdNumber">3</a>

<a href="javascript:" class="tcdNumber">4</a>

<span>...</span>

<a href="javascript:" class="tcdNumber">6</a><a href="javascript:" class="nextPage">下一页</a></div>

实现效果：

首先你需要一个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){

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

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

})

}

}):

普通的分页都是通过程序输出一段链接地址，如

<a href="news.php?page=1">1</a>

<a href="news.php?page=2">2</a>

<a href="news.php?page=3">3</a>

这样 当你点击1，2，3链接页码的时候，会跳转到不同的数据页面，会有个跳转的过程

而ajax分页就是类似这样

<a onclick="jump(1)" href="javascript:void(0)">1</a> function jump(id) {

    $.post('news.php',{"id":id},function(data){

        //这里处理服务器返回的分页列表内容

    },'json')

}

过程就是用ajax向服务器请求资源，把资源再通过js改变到当前页面。好处就是，无刷新，页面不会跳转，整个网页资源不用重新加载，用户体验较好。

---