jquery 页面分页的实现

<!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" onclick="openDeleteReplyDialog()">delete</div></div>\

                          </div>\

                      </div>\

                  </div>\

              '

            }

            return html;

        }

        return publicVar;

    }

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

转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
SpringMVC -jquery实现分页
效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...
12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
jquery动态分页
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...
jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
js jquery 页面加载初始化方法
js jquery 页面加载初始化方法一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

随机推荐

Jmeter原理
Jmeter结构体系及运行原理 Jmeter结构体系把Jmeter的结构体系拆分为三维空间,如图: X1~X5:是负载模拟的一个过程,使用这些组件来完成负载的模拟: X1:选择协议,模拟用户请求 ...
Python基础-编码与解码
一.什么是编码编码是指信息从一种形式或格式转换为另一种形式或格式的过程. 在计算机中,编码,简而言之,就是将人能够读懂的信息(通常称为明文)转换为计算机能够读懂的信息.众所周知,计算机能够读懂的 ...
.net core中常用的属性
//IsNullOrWhiteSpace()判断字符串是否为空指示指定的字符串是 null.空还是仅由空白字符组成,如果字符串的空白String a=" ";IsNullOrE ...
Django 框架 django的请求生命周期
概述首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串,同时http请求是无状态的,可以通过session和cookie来辅助. 浏览器通过ip和端口及路由方式访问服务端. 在Djang ...
ie8以下兼容圆角等css3的属性
<!--[if lt IE 10]> <script type="text/javascript" src="PIE.js"></ ...
CentOS6.5下实现R绘图
1.首先安装R的绘图包Cairo 下载地址:http://www.rforge.net/Cairo/files/ [root@Hadoop-NN-01 mysofts]# R CMD INSTALL ...
leetcode 198打家劫舍
讲解视频见刘宇波leetcode动态规划第三个视频记忆化搜索代码: #include <bits/stdc++.h> using namespace std; class Solutio ...
vmware 12
下载地址 (linux:https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-12.1.1-3770994.x ...
IdentityServer3:.NET开源OpenID和OAuth2架构
简介大多数软件的相互沟通图:客户端与Web应用程序的访问.应用与Web api.api与api……相互沟通则需要授权.身份验证 IdentityServer3的功能:Web认证.SSO单点登录.We ...
原生table相关写法
1.<table style="width: 100%;text-align: center" cellpadding="0" cellspacing=& ...

jquery 页面分页的实现

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

随机推荐

热门专题