jquery动态分页

最新推荐文章于 2022-04-07 10:39:57 发布

zmrdlb

最新推荐文章于 2022-04-07 10:39:57 发布

阅读量2.3k

点赞数

分类专栏： jquery ajax 文章标签： jquery html button function css rest

本文链接：https://blog.csdn.net/zmrdlb/article/details/5494556

版权

这篇博客分享了如何使用jQuery实现类似于时光网的动态分页效果。作者提供了一段JavaScript代码，包括分页按钮的创建、状态更新以及页码的动态显示。通过调用page()函数，结合AJAX动态加载数据，可以实现分页功能。代码可复用，适用于不同的项目需求。

摘要由CSDN通过智能技术生成

最近一直研究jquery的分页效果，刚刚弄好了一个，拿出来与大家分享。分页效果与时光网的差不多。

网址：http://www.mtime.com/movie/news/all/

先在aspx页面放置一个<div class="pageDivs"></div> ，这个是用来存放分页的。

然后建一个page.js文件，具体代码如下(js中用到的css类是自己设置的，这里就不给出了，具体的大家可以自己设置一下css样式)：

$(document).ready(function(){
var pageCount=0;//总页数，在数据处理的函数里设定

//右部按钮分页显示
function right(pageCount,limit,rlimit){
    var html="";
     if(parseInt(pageCount)-limit>=rlimit){
                     for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
                     html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
                     }
                   else{
                     for(var i=parseInt(limit)+1; i<=pageCount; i++){
                     html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
                     }
    return html;
}
//首页，尾页，上一页，下一页
function changeState(pageIndex,pageCount){
     var $button1=$("div.pageDivs").find("#Butt