jquery怎么动态实现表格分页

jquery怎么动态实现表格分页,第1张

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>

实现效果:

<script language="javascript">

var pagesize=5//每页显示几条信息

var totalRecord=$("#PageCon li").length//获取信息的总数

//计算总页数

var totalPages=totalRecord % pagesize == 0 ? totalRecord / pagesize : Math.ceil(totalRecord / pagesize)

$(function(){  

    $('#PageShowUL').twbsPagination({        

        totalPages: totalPages,//总页数        

        visiblePages:7,//显示的页数        

        version:'1.1',//或1.0  1.1是自动根据当前页动态显示页码      

        first:"首页",    

        prev:"下一页",    

        next:"上一页",    

        last:"尾页",        

        onPageClick: function (event,page) {          

            $("#PageCon li").hide()            

            $("#PageCon li").slice((page-1)*pagesize,page*pagesize).show()        

        }    

    })        

})

</script>

具体的看这里:

twbs-pagination分页插件的实际应用实例

在加载页面的时候发出一个请求,用ajax请求就可以,请求返回结果是获取所需要的所有信息,存在一个js对象里

//success是请求成功后的返回函数,msg代表的是服务端的返回值,也就是你需要的那些信息

可以将这些信息存到List<User>里,然后再将list转成JSONArray返回,msg就是返回值

var dataObj

$.ajax({

    url:"yourservlet",

    type:"POST",

    data:"你请求的参数,随便填,只要后台接收了然后调用业务层进行查询返回结果就行",

    success:function(msg){

        dataObj=msg

        alert("返回成功")

    }

})

//之后已经获取到了数据到浏览器,需要根据页数来分页,就是遍历数组了,dataObj就是一个

json对象,根据你的每页数量和页数来获取,这就是思路


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/9853735.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存