1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>分页</title>
  5.   <link rel="stylesheet" type="text/css" href="./css/page.css"></style>
  6.   <script type="text/javascript" src="./js/jquery.min.js"></script>
  7.   <script type="text/javascript" src="./js/index.js"></script>
  8. </head>
  9. <body>
  10.   <div class="">
  11.       <div class="container" id="container" style="min-width:400px;min-height: 600px;">
  12.       </div>
  13.   </div>
  14.   <script type="text/javascript">
  15.     $(document).ready(function(){
  16.       // 创建一个分页的实例对象，利用对象中的方法进行分页
  17.         var pageone = new PageInit('qA','../test3.json');
  18.         var pageInit = pageone.createPage();
  19.  
  20.         $('#container').html(pageInit);
  21.         pageone.init('../test3.json');
  22.         pageone.operator();
  23.     })
  24.   </script>
  25. </body>
  26. </html>

　　

  1. index.js文件内容
  2.     // 本例仅仅实现了页面跳转向后台传递数据，后台根据具体参数返回数据我们显示在页面上
  3.     function PageInit(className,url){
  4.         var publicVar={} ;
  5.         var tempClassName = className;
  6.         var tempUrl = url;
  7.         var totalItem;
  8.         publicVar.init = function(tempUrl){
  9.             var parInit = {
  10.                 'page':1,
  11.                 'pagesize':10
  12.             }
  13.             this.reloadReplies(parInit);
  14.         }
  15.         publicVar.createPage = function(){
  16.             var html = `
  17.             <div class=${tempClassName}>
  18.                 <div class="data-area"></div>
  19.                 <div class="center">
  20.                   <table  class="pageinitial" >
  21.                       <tr>
  22.                           <td>
  23.                               <select name="pageItemNum" class ="rows" >
  24.                                   <option value="10">10</option>
  25.                                   <option value="15">15</option>
  26.                                   <option value="25">25</option>
  27.                                   <option value="50">50</option>
  28.                               </select>
  29.                           </td>
  30.                           <td class="division"> | </td>
  31.                           <td>
  32.                               <a href="javascript:void(0)" class="page-first">
  33.                                    
  34.                               </a>
  35.                           </td>
  36.                           <td>
  37.                               <a href="javascript:void(0)" class="page-prev">
  38.                                    
  39.                               </a>
  40.                           </td>
  41.                           <td class="division"> | </td>
  42.                           <td>
  43.                               page  <input class="page" value="1" style="width:30px;display:inline-block;text-align:center" readonly/>
  44.                           </td>
  45.                           <td>
  46.                                 of  <span class="page-total"></span>
  47.                           </td>
  48.                           <td class="division"> | </td>
  49.                           <td>
  50.                               <a  class="page-next" href="javascript:void(0)">
  51.                                    
  52.                               </a>
  53.                           </td>
  54.                           <td>
  55.                               <a href="javascript:void(0)" class="page-last">
  56.                                    
  57.                               </a>
  58.                           </td>
  59.                       </tr>
  60.                   </table>
  61.                 </div>
  62.             </div>`
  63.             return html;
  64.         };
  65.             // 绑定标签的点击函数
  66.         publicVar.operator = function(tempUrl){
  67.             var _self = this;
  68.             $('.'+tempClassName+' .page-first').click(function(e){
  69.                 e.preventDefault();
  70.                 pageParams = _self.curPage(tempClassName);
  71.                 if(pageParams.page==maxPage){
  72.                     $('.'+tempClassName+' .page-next').removeClass('page-disable');
  73.                     $('.'+tempClassName+' .page-last').removeClass('page-disable');
  74.                     _self.aAbled('.'+tempClassName+' .page-next');
  75.                     _self.aAbled('.'+tempClassName+' .page-last');
  76.  
  77.                 }
  78.                 if(pageParams.page>1) {
  79.                     pageParams.page = 1;
  80.                     $('.'+tempClassName+' .page').val(pageParams.page);
  81.                     $('.'+tempClassName+' .page-total').html(maxPage);
  82.                     $('.'+tempClassName+' .page-prev').addClass('page-disable');
  83.                     $('.'+tempClassName+' .page-first').addClass('page-disable');
  84.                     _self.aDisabled('.'+tempClassName+' .page-prev');
  85.                     _self.aDisabled('.'+tempClassName+' .page-first');
  86.                     _self.pagefresh(pageParams,tempUrl);
  87.                 }
  88.             });
  89.             $('.'+tempClassName+' .page-prev').click(function(e){
  90.                 e.preventDefault();
  91.                 pageParams = _self.curPage(tempClassName);
  92.                 maxPage = Math.ceil(totalItem/pageParams.pagesize);
  93.                 if(pageParams.page==maxPage){
  94.                     $('.'+tempClassName+' .page-next').removeClass('page-disable');
  95.                     $('.'+tempClassName+' .page-last').removeClass('page-disable');
  96.                     _self.aAbled('.'+tempClassName+' .page-next');
  97.                     _self.aAbled('.'+tempClassName+' .page-last');
  98.                 }
  99.                 if(pageParams.page>1){
  100.                     pageParams.page = pageParams.page-1;
  101.                     if(pageParams.page==1){
  102.                         $('.'+tempClassName+' .page-prev').addClass('page-disable');
  103.                         $('.'+tempClassName+' .page-first').addClass('page-disable');
  104.                         _self.aDisabled('.'+tempClassName+' .page-prev');
  105.                         _self.aDisabled('.'+tempClassName+' .page-first');
  106.                     }
  107.                     $('.'+tempClassName+' .page').val(pageParams.page);
  108.                     $('.'+tempClassName+' .page-total').html(maxPage);
  109.                     _self.pagefresh(pageParams,tempUrl);
  110.                 }
  111.             });
  112.             $('.'+tempClassName+' .page-next').click(function(e){
  113.                 e.preventDefault();
  114.                 pageParams = _self.curPage(tempClassName);
  115.                 maxPage = Math.ceil(totalItem/pageParams.pagesize);
  116.                 if(pageParams.page==1){
  117.                     $('.'+tempClassName+' .page-prev').removeClass('page-disable');
  118.                     $('.'+tempClassName+' .page-first').removeClass('page-disable');
  119.                     _self.aAbled('.'+tempClassName+' .page-prev');
  120.                     _self.aAbled('.'+tempClassName+' .page-first');
  121.                 }
  122.                 if(pageParams.page<maxPage){
  123.                     pageParams.page = pageParams.page-1+2;
  124.                     if(pageParams.page==maxPage){
  125.                         $('.'+tempClassName+' .page-next').addClass('page-disable');
  126.                         $('.'+tempClassName+' .page-last').addClass('page-disable');
  127.                         _self.aDisabled('.'+tempClassName+' .page-next');
  128.                         _self.aDisabled('.'+tempClassName+' .page-last');
  129.                     }
  130.                     $('.'+tempClassName+' .page').val(pageParams.page);
  131.                     $('.'+tempClassName+' .page-total').html(maxPage);
  132.                     _self.pagefresh(pageParams,tempUrl);
  133.                 }
  134.             });
  135.             $('.'+tempClassName+' .page-last').click(function(e){
  136.                 e.preventDefault();
  137.                 pageParams = _self.curPage(tempClassName);
  138.                 maxPage = Math.ceil(totalItem/pageParams.pagesize);
  139.                 if(pageParams.page==1){
  140.                     $('.'+tempClassName+' .page-prev').removeClass('page-disable');
  141.                     $('.'+tempClassName+' .page-first').removeClass('page-disable');
  142.                     _self.aAbled('.'+tempClassName+' .page-prev');
  143.                     _self.aAbled('.'+tempClassName+' .page-first');
  144.                 }
  145.                 if(pageParams.page<maxPage){
  146.                     maxPage = Math.ceil(totalItem/pageParams.pagesize);
  147.                     pageParams.page = maxPage;
  148.                     $('.'+tempClassName+' .page').val(maxPage);
  149.                     $('.'+tempClassName+' .page-total').html(maxPage);
  150.                     $('.'+tempClassName+' .page-next').addClass('page-disable');
  151.                     $('.'+tempClassName+' .page-last').addClass('page-disable');
  152.                     _self.aDisabled('.'+tempClassName+' .page-next');
  153.                     _self.aDisabled('.'+tempClassName+' .page-last');
  154.                     _self.pagefresh(pageParams,tempUrl);
  155.                 }
  156.             });
  157.             $('.'+tempClassName+' .rows').change(function(e){
  158.                 pageParams = _self.curPage(tempClassName);
  159.                 maxPage = Math.ceil(totalItem/pageParams.pagesize);
  160.                 $('.'+tempClassName+' .page-total').html(maxPage);
  161.                 $('.'+tempClassName+' .page').val('1');
  162.                 pageParams.page = $('.'+tempClassName+' .page').val();
  163.                 $('.'+tempClassName+' .page-prev').addClass('page-disable');
  164.                 $('.'+tempClassName+' .page-first').addClass('page-disable');
  165.                 _self.aDisabled('.'+tempClassName+' .page-prev');
  166.                 _self.aDisabled('.'+tempClassName+' .page-first');
  167.                 if(maxPage==1){
  168.                     $('.'+tempClassName+' .page-next').addClass('page-disable');
  169.                     $('.'+tempClassName+' .page-last').addClass('page-disable');
  170.                     _self.aDisabled('.'+tempClassName+' .page-next');
  171.                     _self.aDisabled('.'+tempClassName+' .page-last');
  172.                 }else{
  173.                     $('.'+tempClassName+' .page-next').removeClass('page-disable');
  174.                     $('.'+tempClassName+' .page-last').removeClass('page-disable');
  175.                     _self.aAbled('.'+tempClassName+' .page-next');
  176.                     _self.aAbled('.'+tempClassName+' .page-last');
  177.                 }
  178.                 _self.pagefresh(pageParams,tempUrl);
  179.             });
  180.         };
  181.         //  设置标签是否可以进行点击
  182.         publicVar.aDisabled = function(tempClassName) {
  183.             $(tempClassName).attr('disabled', true);
  184.             $(tempClassName).css('pointer-events', 'none');
  185.         };
  186.         publicVar.aAbled = function(tempClassName) {
  187.             $(tempClassName).attr('disabled', false);
  188.             $(tempClassName).css('pointer-events', 'auto');
  189.         };
  190.             // 获取当前页面信息页码页数和itemID
  191.         publicVar.curPage = function (tempClassName){
  192.             var rtn ={};
  193.             rtn.pagesize = $('.'+tempClassName+' .rows').val();
  194.             rtn.page = $('.'+tempClassName+' .page').val();
  195.             return rtn;
  196.         };
  197.         // 得到参数后刷新，可以根据不同的tempClassName来局部刷新不同的列表
  198.         publicVar.pagefresh = function (params,tempUrl){
  199.             this.reloadReplies(params,tempUrl);
  200.         };
  201.         publicVar.reloadReplies = function(pars){
  202.             _self = this;
  203.             var htmlItem ='';
  204.             var lenItem = '';
  205.             $.ajax({
  206.               url:tempUrl,
  207.               params:pars,
  208.               async: false,
  209.                 success:function(data){
  210.                     totalItem = data.total;
  211.                     if(totalItem==0){
  212.                         maxPageItem = 1;
  213.                     }else{
  214.                         maxPageItem = Math.ceil(totalItem/pars.pagesize);
  215.                     }
  216.                     if(pars.page==1){
  217.                         $('.'+tempClassName+' .page-prev').addClass('page-disable');
  218.                         $('.'+tempClassName+' .page-first').addClass('page-disable');
  219.                         _self.aDisabled('.'+tempClassName+' .page-prev');
  220.                         _self.aDisabled('.'+tempClassName+' .page-first');
  221.                     }
  222.                     if(pars.page==maxPageItem){
  223.                         $('.'+tempClassName+' .page-next').addClass('page-disable');
  224.                         $('.'+tempClassName+' .page-last').addClass('page-disable');
  225.                         _self.aDisabled('.'+tempClassName+' .page-next');
  226.                         _self.aDisabled('.'+tempClassName+' .page-last');
  227.                     }else{
  228.                         $('.'+tempClassName+' .page-next').removeClass('page-disable');
  229.                         $('.'+tempClassName+' .page-last').removeClass('page-disable');
  230.                         _self.aAbled('.'+tempClassName+' .page-next');
  231.                         _self.aAbled('.'+tempClassName+' .page-last');
  232.                     }
  233.                     $('.'+tempClassName+' .page-total').html(maxPageItem);
  234.                     $('.'+tempClassName+' .page').val(pars.page);
  235.                     lenItem = data.List.length;
  236.                     if(lenItem>0){
  237.                         // data.rows.postReplys = convertTime(data.rows.postReplys);
  238.                         htmlItem = _self.fn(data.List);
  239.  
  240.                     }
  241.                     $('.'+tempClassName+' .data-area').html(htmlItem);
  242.                 }
  243.             });
  244.         };
  245.         // publicVar.createListItem = function(){
  246.  
  247.         // }
  248.         publicVar.fn = function(item){
  249.             var html='';
  250.             for(var i=0;i<item.length;i++){
  251.                 html+= '\
  252.                   <div class="reply-item">\
  253.                       <div class="user-portrait">\
  254.                           <div class="portrait"><img src='+item[i].headIcon+'></div>\
  255.                       </div>\
  256.                       <div class="reply-detail">\
  257.                           <div class="reply-user">'+item[i].Name+'</div>\
  258.                           <div class="reply-content">'+item[i].reply_content+'</div>\
  259.                           <div class="reply-last">\
  260.                               <div class="reply-time">'+item[i].reply_time+'</div>\
  261.                               <div class="reply-delete"><div style="color: #0011ff;width:50px;cursor:pointer" onclick="openDeleteReplyDialog()">delete</div></div>\
  262.                           </div>\
  263.                       </div>\
  264.                   </div>\
  265.               '
  266.             }
  267.             return html;
  268.         }
  269.         return publicVar;
  270.     }
  271.  
  272. 　　
 
 
 
 
 

jquery 页面分页的实现的更多相关文章

  1. 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  2. SpringMVC -jquery实现分页

    效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...

  3. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  4. jquery动态分页

    最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...

  5. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  6. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  7. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  8. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  9. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

随机推荐

  1. PHP做APP接口时，如何保证接口的安全性??????????

    PHP做APP接口时,如何保证接口的安全性? 1.当用户登录APP时,使用https协议调用后台相关接口,服务器端根据用户名和密码时生成一个access_key,并将access_key保存在sess ...

  2. Windows下用户变量和系统变量

    环境变量分为用户变量和系统变量. 系统变量,对所有用户起作用;而用户环境变量只对当前用户起作用. 例如你要用java,那么你把java的bin目录加入到path变量下面,那么它就是系统环境变量,所用用 ...

  3. abap中结构体嵌套结构体。

    1: 结构体中嵌套结构体. *&---------------------------------------------------------------------* *& Re ...

  4. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  5. kfrobotaidlog查找

    ======查看最新的大于6的数量========== select c.questionid from (select a.questionid, b.clientQuestion from sim ...

  6. react 写一个贪吃蛇

    示例: 全部代码如下: snake.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types'; ...

  7. 7.C# 多态的实现

    C# 多态的实现 封装.继承.多态,面向对象的三大特性,前两项理解相对容易,但要理解多态,特别是深入的了解,对于初学者而言可能就会有一定困难了.我一直认为学习OO的最好方法就是结合实践,封装.继承在实 ...

  8. 使用SQL语句如何实现条件判断

    客户需求是咨询如何用SQL结合decode函数实现条件判断,比如当某一列数值大于500,对应类型"大于500":当某一列数值小于500,对应类型"小于500". ...

  9. uml的几种关系总结

    UML类图几种关系的总结    在UML类图中,常见的有以下几种关系:泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregati ...

  10. JavaScript学习笔记之call和apply

    前端的知识面太广了,想要记住所有知识点是不可能的,所以将这些学过的记录下来,随时都可以翻开来参考 1.call方法 调用一个对象的一个方法,call(this, arg1, arg2,argN);用来 ...