jquery 页面分页的实现

最新推荐文章于 2022-01-20 11:47:44 发布
最新推荐文章于 2022-01-20 11:47:44 发布
阅读量303 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xhliang/p/7852272.html
版权
  

<!DOCTYPE html>
<html>
<head>
  <title>分页</title>
  <link rel="stylesheet" type="text/css" href="./css/page.css"></style>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
  <div class="">
      <div class="container" id="container" style="min-width:400px;min-height: 600px;">
      </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      // 创建一个分页的实例对象，利用对象中的方法进行分页
        var pageone = new PageInit('qA','../test3.json');
        var pageInit = pageone.createPage();

        $('#container').html(pageInit);
        pageone.init('../test3.json');
        pageone.operator();
    })
  </script>
</body>
</html>

　　

index.js文件内容
    // 本例仅仅实现了页面跳转向后台传递数据，后台根据具体参数返回数据我们显示在页面上
    function PageInit(className,url){
        var publicVar={} ;
        var tempClassName = className;
        var tempUrl = url;
        var totalItem;
        publicVar.init = function(tempUrl){
            var parInit = {
                'page':1,
                'pagesize':10
            }
            this.reloadReplies(parInit);
        }
        publicVar.createPage = function(){
            var html = `
            <div class=${tempClassName}>
                <div class="data-area"></div>
                <div class="center">
                  <table  class="pageinitial" >
                      <tr>
                          <td>
                              <select name="pageItemNum" class ="rows" >
                                  <option value="10">10</option>
                                  <option value="15">15</option>
                                  <option value="25">25</option>
                                  <option value="50">50</option>
                              </select>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              <a href="javascript:void(0)" class="page-first">
                                   
                              </a>
                          </td>
                          <td>
                              <a href="javascript:void(0)" class="page-prev">
                                   
                              </a>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              page  <input class="page" value="1" style="width:30px;display:inline-block;text-align:center" readonly/>
                          </td>
                          <td>
                                of  <span class="page-total"></span>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              <a  class="page-next" href="javascript:void(0)">
                                   
                              </a>
                          </td>
                          <td>
                              <a href="javascript:void(0)" class="page-last">
                                   
                              </a>
                          </td>
                      </tr>
                  </table>
                </div>
            </div>`
            return html;
        };
            // 绑定标签的点击函数
        publicVar.operator = function(tempUrl){
            var _self = this;
            $('.'+tempClassName+' .page-first').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                if(pageParams.page==maxPage){
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');

                }
                if(pageParams.page>1) {
                    pageParams.page = 1;
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    $('.'+tempClassName+' .page-prev').addClass('page-disable');
                    $('.'+tempClassName+' .page-first').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-prev');
                    _self.aDisabled('.'+tempClassName+' .page-first');
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-prev').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==maxPage){
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');
                }
                if(pageParams.page>1){
                    pageParams.page = pageParams.page-1;
                    if(pageParams.page==1){
                        $('.'+tempClassName+' .page-prev').addClass('page-disable');
                        $('.'+tempClassName+' .page-first').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-prev');
                        _self.aDisabled('.'+tempClassName+' .page-first');
                    }
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-next').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==1){
                    $('.'+tempClassName+' .page-prev').removeClass('page-disable');
                    $('.'+tempClassName+' .page-first').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-prev');
                    _self.aAbled('.'+tempClassName+' .page-first');
                }
                if(pageParams.page<maxPage){
                    pageParams.page = pageParams.page-1+2;
                    if(pageParams.page==maxPage){
                        $('.'+tempClassName+' .page-next').addClass('page-disable');
                        $('.'+tempClassName+' .page-last').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-next');
                        _self.aDisabled('.'+tempClassName+' .page-last');
                    }
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-last').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==1){
                    $('.'+tempClassName+' .page-prev').removeClass('page-disable');
                    $('.'+tempClassName+' .page-first').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-prev');
                    _self.aAbled('.'+tempClassName+' .page-first');
                }
                if(pageParams.page<maxPage){
                    maxPage = Math.ceil(totalItem/pageParams.pagesize);
                    pageParams.page = maxPage;
                    $('.'+tempClassName+' .page').val(maxPage);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    $('.'+tempClassName+' .page-next').addClass('page-disable');
                    $('.'+tempClassName+' .page-last').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-next');
                    _self.aDisabled('.'+tempClassName+' .page-last');
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .rows').change(function(e){
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                $('.'+tempClassName+' .page-total').html(maxPage);
                $('.'+tempClassName+' .page').val('1');
                pageParams.page = $('.'+tempClassName+' .page').val();
                $('.'+tempClassName+' .page-prev').addClass('page-disable');
                $('.'+tempClassName+' .page-first').addClass('page-disable');
                _self.aDisabled('.'+tempClassName+' .page-prev');
                _self.aDisabled('.'+tempClassName+' .page-first');
                if(maxPage==1){
                    $('.'+tempClassName+' .page-next').addClass('page-disable');
                    $('.'+tempClassName+' .page-last').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-next');
                    _self.aDisabled('.'+tempClassName+' .page-last');
                }else{
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');
                }
                _self.pagefresh(pageParams,tempUrl);
            });
        };
        //  设置标签是否可以进行点击
        publicVar.aDisabled = function(tempClassName) {
            $(tempClassName).attr('disabled', true);
            $(tempClassName).css('pointer-events', 'none');
        };
        publicVar.aAbled = function(tempClassName) {
            $(tempClassName).attr('disabled', false);
            $(tempClassName).css('pointer-events', 'auto');
        };
            // 获取当前页面信息页码页数和itemID
        publicVar.curPage = function (tempClassName){
            var rtn ={};
            rtn.pagesize = $('.'+tempClassName+' .rows').val();
            rtn.page = $('.'+tempClassName+' .page').val();
            return rtn;
        };
        // 得到参数后刷新，可以根据不同的tempClassName来局部刷新不同的列表
        publicVar.pagefresh = function (params,tempUrl){
            this.reloadReplies(params,tempUrl);
        };
        publicVar.reloadReplies = function(pars){
            _self = this;
            var htmlItem ='';
            var lenItem = '';
            $.ajax({
              url:tempUrl,
              params:pars,
              async: false,
                success:function(data){
                    totalItem = data.total;
                    if(totalItem==0){
                        maxPageItem = 1;
                    }else{
                        maxPageItem = Math.ceil(totalItem/pars.pagesize);
                    }
                    if(pars.page==1){
                        $('.'+tempClassName+' .page-prev').addClass('page-disable');
                        $('.'+tempClassName+' .page-first').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-prev');
                        _self.aDisabled('.'+tempClassName+' .page-first');
                    }
                    if(pars.page==maxPageItem){
                        $('.'+tempClassName+' .page-next').addClass('page-disable');
                        $('.'+tempClassName+' .page-last').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-next');
                        _self.aDisabled('.'+tempClassName+' .page-last');
                    }else{
                        $('.'+tempClassName+' .page-next').removeClass('page-disable');
                        $('.'+tempClassName+' .page-last').removeClass('page-disable');
                        _self.aAbled('.'+tempClassName+' .page-next');
                        _self.aAbled('.'+tempClassName+' .page-last');
                    }
                    $('.'+tempClassName+' .page-total').html(maxPageItem);
                    $('.'+tempClassName+' .page').val(pars.page);
                    lenItem = data.List.length;
                    if(lenItem>0){
                        // data.rows.postReplys = convertTime(data.rows.postReplys);
                        htmlItem = _self.fn(data.List);

                    }
                    $('.'+tempClassName+' .data-area').html(htmlItem);
                }
            });
        };
        // publicVar.createListItem = function(){

        // }
        publicVar.fn = function(item){
            var html='';
            for(var i=0;i<item.length;i++){
                html+= '\
                  <div class="reply-item">\
                      <div class="user-portrait">\
                          <div class="portrait"><img src='+item[i].headIcon+'></div>\
                      </div>\
                      <div class="reply-detail">\
                          <div class="reply-user">'+item[i].Name+'</div>\
                          <div class="reply-content">'+item[i].reply_content+'</div>\
                          <div class="reply-last">\
                              <div class="reply-time">'+item[i].reply_time+'</div>\
                              <div class="reply-delete"><div style="color: #0011ff;width:50px;cursor:pointer" οnclick="openDeleteReplyDialog()">delete</div></div>\
                          </div>\
                      </div>\
                  </div>\
              '
            }
            return html;
        }
        return publicVar;
    }

　　
 
 
 
 
 

转载于:https://www.cnblogs.com/xhliang/p/7852272.html

weixin_30708329
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现分页插件
03-07
jQuery分页插件，代码少兼容性好，好用简单，快速集成。
jQuery实现页面级分页
shaq34的专栏
08-31 110
这是一个页面级的分页，先获取页面表格，然后对表格进行分页。 需要页面加载完成才能获得表格，所以js代码应该在表格最后。 我的方法是把显示按钮的层与js代码写到自定义标签里。按钮当然是放在表格之后 提供下载的例子是可以直接演示的。 表格部分 [code="java"] &nbsp; EMPN...
jquery实现分页效果
weixin_30505751的博客
04-11 748
通过jq实现分页的原理如下：将所有条数加载到页面中，根据每页放特定条数（例如 5 条）获取jquery对象索引，使部分条数显示，其他条数隐藏。 前提：引入jquery.js 代码 <!DOCTYPE html> <html> <head> <title></title> <style type=...
jquery分页
weixin_30500105的博客
08-06 78
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style&...
jQuery分页
Hellos_Worlds的博客
01-20 810
注: 只引用了jquery-1.8.2版本的脚本,其余版本的jquery脚本也可以 css样式: * { margin: 0; padding: 0; list-style: none; } .wrapper { width: 800px; margin: 50px auto; } /*清除浮动*/ .wrapper::after { content: ""; display: block; clear: both; } ul li
Jquery简单分页实现方法
10-23
总的来说，这个jQuery分页实现方法通过简单的DOM操作和事件监听，实现了基本的分页功能。尽管它可能不包含高级特性，如动态加载、缓存或无限滚动等，但对于小型项目或学习实践，这是一个简洁且实用的解决方案。在...
jquery 分页控件实现代码
10-29
《jQuery实现分页控件详解》 在网页开发中，数据的展示往往涉及到大量的记录，这时分页功能显得尤为重要。本文将详细介绍如何使用jQuery来实现一个基础的分页控件，帮助开发者更高效地处理大量数据的展示。 首先，...
纯jQuery实现前端分页功能
12-09
【纯jQuery实现前端分页功能】 前端分页是一种常见的数据展示策略，尤其在处理大量数据时，可以显著提升页面加载速度和用户体验。在本文中，我们将探讨如何使用jQuery库来实现在前端进行分页，避免一次性加载大量...
jQuery实现的简单分页示例
10-22
主要介绍了jQuery实现的简单分页,涉及jQuery数学运算与页面元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery实现分页组件
11-17
**jQuery实现分页组件** 在Web开发中，分页是一种常见的功能，用于处理大量数据时，将内容分段展示，提高用户体验。jQuery是一款强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，同时也方便我们...
jQuery 分页器
weixin_41040445的博客
03-27 524
jQuery分页器 展示分四种情况 总页数少于5页 总页数大于5页，当前选择页面小于5 总页数大于5页，当前选择页面大于等于5 总页数大于5页，当前选择页面在最后总页数的5页内 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e..
jquery页面分页（前后台）
weixin_30593443的博客
01-04 116
效果： 首页 1 2 3 4 5 6 7 尾页 废话不多说上代码 html： <div id="pageTop"/> <div id="list" /> <div id="pageDown"/> jquery: //分页 begin var size=7; //最多显示n个页码标签 val="<...
jquery分页显示
koastal的博客
06-27 4595
我们在显示文章列表的时候，通常需要分页显示。 一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。 另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。html代码<div class="am-g"> <div class="am-u-sm-12" id="listTag"> </div></div>js代码$(function
JavaScript-jquery实现网页内容分页的一种方式
weixin_41993525的博客
12-30 314
这是使用JavaScript原生方式&jquery实现web网页内容分页功能的一种方式。 闲来无事将以前的代码进行分析。 是本人两年前尝试通过JavaScript与jquery方式做的一个分页功能。（当时这家公司老板人非常nice,感恩这位老板）。 一般我们写分页，都是有三个变量，即当前页、每页多少条目、后台根据每页多少条目计算出的总页数。这其中每页多少条是固定的，每次向后台数据库请求数据，根据当前页位置只拿这固定的条目。这样方式是加载速度较为均衡，既不明显很慢也不是特别快。 我见过另一种分页思路，
基于jquery的简单分页实现
風缘的博客
06-06 8798
先上图： 之前在做表格插件想把分页整合进去，原本去网站找一个现成的整合进去，发现有些太简单或者很复杂，达不到自己的要求，自己想还是自己整一个，顺便了解一下其中的原理。 分页样式是基于boostarp的。 （1）页面引入boostarp.css和jquery （2）html代码 &amp;lt;div id=&quot;pageBox&quot; style=&quot;width:1000px;margin: 30p...
jQuery实现简单分页
热门推荐
农夫旁有山泉的博客
02-02 2万+
现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈） 今天发布一个前端超简单的分页效果,纯jQ！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上 最简单的分页 ul.pagination { display: inline-block;
java jquery分页_Jquery简单分页实现方法
weixin_29002209的博客
03-06 115
本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下：js代码：function dolistpage(pagerow,pagenum,rowcount,pagecount){$("#pagemsg").html("每页显示"+pagerow+"条，当前" + pagenum + "/" +pagecount + "页共" +rowcount + "条");if (page...
JQ实现简单分页工具
weixin_30951231的博客
03-27 81
/** *分页工具条初始化 * *@param {string} [pageId] [页面分页工具栏外层容器标签ID] *@param {number} [sumPage] [总页数] *@param {number} [currPage] [当前页] * *@author:h51701 *@date:20...
jquery实现分页功能
最新发布
05-18
要使用jQuery实现分页功能，需要先获取到要分页的数据，然后根据每页显示的数量和总数据量计算出需要分成多少页。然后在页面上生成相应的分页导航，当用户点击不同的分页按钮时，再用jQuery动态地显示相应的数据。 以下是一个简单的示例代码： HTML部分： ``` <div id="data"></div> <div id="pagination"></div> ``` JS部分： ``` // 模拟数据 var data = []; for (var i = 1; i <= 50; i++) { data.push("数据" + i); } // 每页显示的数量 var pageSize = 10; // 总页数 var pageCount = Math.ceil(data.length / pageSize); // 显示数据的函数 function showData(pageIndex) { var html = ""; for (var i = (pageIndex - 1) * pageSize; i < pageIndex * pageSize && i < data.length; i++) { html += "<p>" + data[i] + "</p>"; } $("#data").html(html); } // 生成分页导航的函数 function generatePagination() { var html = ""; for (var i = 1; i <= pageCount; i++) { html += "<span data-page='" + i + "'>" + i + "</span>"; } $("#pagination").html(html); } // 默认显示第一页的数据 showData(1); // 生成分页导航 generatePagination(); // 点击分页导航时显示相应的数据 $("#pagination").on("click", "span", function() { var pageIndex = parseInt($(this).data("page")); showData(pageIndex); }); ``` 在上面的示例代码中，我们首先定义了一个模拟数据，然后根据每页显示的数量和总数据量计算出总页数。接着定义了两个函数，一个用于显示数据，一个用于生成分页导航。然后在页面加载完成后，先显示第一页的数据，再生成分页导航。最后监听分页导航的点击事件，在点击时根据点击的页码显示相应的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值