一个通用的JS分页标签

最新推荐文章于 2021-06-16 03:26:47 发布
最新推荐文章于 2021-06-16 03:26:47 发布
阅读量47 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/JangoJing/archive/2012/10/19/2731511.html
版权

参考了http://blog.163.com/yexuan_1/blog/static/1343660992012511103844103/

 

由于本身样式不是太美观,于是在此基础上做了一些修改

image

image

image

 

 

<html>
<head>
<style>
.list_page { width: auto; height: auto; float: right; margin-top: 20px;}
.list_page ul li{ width: auto; height: 23px; float: left; background: #eee; margin-left: 5px; border: 1px solid #C4CED8;}
	.list_page ul li a{ color: #333; display: block; line-height: 23px; padding: 0 15px; }
	.list_page ul li.on{ background: #bbb; border: #bbb; }
	.list_page ul li.on a{ color: #fff;}

</style>
 <script>
function PageSystem(count, divID, grountCount, callBack) {
    this.totolCount = count; //总记录数
    this.initMaxPage = grountCount ? grountCount : 5;  //显示页数，如 1 2 3 4 5
    this.pageSize = 10;  //每页记录数
    this.currentMax = 0; //当前显示的最大页码, 如 1 2 3 4 5; 5为最大页码
    this.currentMin = 0; //当前显示的最小页码, 如 11 12 13 14 15; 11为最小页码
    this.homePage = 0; //首页
    this.endPage = 0; //未页
    this.currentPage = 0; //当前页
    this.currentActiveSpan; //当前活动a容器
    this.pageDivObj = document.getElementById(divID); //分页系统容器
    this.pages = 0; //总页数，计算得到
    //this._url = _url; //提交URL
    this.callBack = callBack; //回调
    var that = this; //指针的引用


    this.init = function () {
        this.pages = parseInt(this.totolCount / this.pageSize); //获得总共有几页
        this.pages = this.totolCount % this.pageSize == 0 ? this.pages : this.pages + 1;
        this.createHomePage();
        //this.createPrePage();
        var n = 1;
        while (n <= this.pages) {
            if (n > this.initMaxPage) {
                break; //到达最大显示数
            }
            var _li = document.createElement("li");

            if (n == 1) { //初始化时第一页为活动页
                this.currentActiveSpan = _li;
                var _a = document.createElement("A");
                _a.href = "javascript:void(0);";
                _a.innerText = 1;
                _li.appendChild(_a);
                that.currentActiveSpan.className = "on";
            } else {
                var _a = document.createElement("A");
                _a.href = "#";
                _a.onclick = this.reView;
                _a.innerText = n;
                _li.appendChild(_a);
            }
            this.pageDivObj.appendChild(_li);
            n++;
        }
        if (this.pages != 0) {
            this.currentMax = n - 1; //当前组最大页码 1 2 3 4 5值为5
            this.currentMin = 1; //当前最小页码 1 2 3 4 5 值为1
            this.homePage = 1; //首页
            this.endPage = this.pages; //未页
            this.currentPage = 1; //当前页
        }
        //alert(this.currentMax);
        //alert(this.currentMin);
        //this.createNextPage();
        this.createEndPage();



    };
    this.query = function () {
        var curPage = that.currentPage; //当前页
        var pageSize = that.pageSize;
        if (that.callBack) that.callBack(curPage, pageSize);

    };
    this.reView = function () {
        //重新渲染UI
        that.reViewActivePage();
        that.query();
    };
    this.reViewActivePage = function () {
        //重新渲染当前页视图
        var actA = event.srcElement; //当前被点击的 a对象
        var ap = actA.parentNode; //获得当前a容器span对象
        //还原当前页视图
        var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.reView;
        _a.innerText = that.currentActiveSpan.innerText;
        that.currentActiveSpan.innerText = "";
        that.currentActiveSpan.appendChild(_a);
        that.currentActiveSpan.className = "";
        //渲染新的当前页视图
        that.currentActiveSpan = ap; //切换当前活动页容器
        var curPage = parseInt(actA.innerText);
        that.currentActiveSpan.removeChild(actA);
        var _a = document.createElement("A");
        _a.href = "javascript:void(0);";
        _a.innerText = curPage;
        that.currentActiveSpan.appendChild(_a);
        this.currentPage = curPage; //更改当前页码
        that.currentActiveSpan.className = "on";
        if (!that.toNextGroup()) that.toPreGroup();
    };
    this.toNextGroup = function () {
		
        //重新渲染显示页下一组 1 2 3 4 5 --> 5 6 7 8 9
        if (that.currentPage == that.currentMax) {//点击的页码为当前组最大页码，当go 下一组
            if (that.currentPage != that.endPage) { //如果点了未页当然不会再有下一组啦！
                that.pageDivObj.innerHTML = ""; //@1
                var pageCode = parseInt(that.currentPage) + 1; //显示页码
                var n = 2; //当前活动页不重创
                this.createHomePage();
                //this.createPrePage();
                
				var _a = document.createElement("A");
                _a.href = "#";
                _a.onclick = that.reView;
                _a.innerText =  that.currentPage;
                that.currentActiveSpan.appendChild(_a);
                that.currentActiveSpan.className = "on";
               
                //that.currentActiveSpan.innerText = that.currentPage;
                that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@1
                while (pageCode <= that.pages) {
                    if (n > that.initMaxPage) {
                        break; //到达最大显示数
                    }
                    var _li = document.createElement("li");

                    var _a = document.createElement("A");
                    _a.href = "#";
                    _a.onclick = that.reView;
                    _a.innerText = pageCode;
                    _li.appendChild(_a);
                    that.pageDivObj.appendChild(_li);
                    pageCode++;
                    n++;
                }
                that.currentMax = pageCode - 1;
                that.currentMin = that.currentPage;
				
                // alert("currentMax: " + that.currentMax);
                // alert("currentMin: " + that.currentMin);
                //this.createNextPage();
                that.createEndPage();
                return true;
            } //end if
        } //end if
        return false;
    };
    this.toPreGroup = function () { //
		
        //重新渲染显示页上一组 5 6 7 8 9 -->1 2 3 4 5
        if (that.currentPage == that.currentMin) { //点了组中最小页码
            if (that.currentPage != 1) {
                that.pageDivObj.innerHTML = ""; //@2
                var pageCode = parseInt(that.currentPage) - (that.initMaxPage - 1); //显示页码
                var n = 2; //当前活动页不重创
                this.createHomePage();
                //this.createPrePage();
                while (true) {
                    if (n > that.initMaxPage) {
                        break; //到达最大显示数
                    }
                    var _li = document.createElement("li");

                    var _a = document.createElement("A");
                    _a.href = "#";
                    _a.onclick = that.reView;
                    _a.innerText = pageCode++;
                    _li.appendChild(_a);
                    that.pageDivObj.appendChild(_li);
                    n++;
                }
                that.currentMax = that.currentPage;
                that.currentMin = pageCode - (that.initMaxPage - 1);
                //alert("currentMax: " + that.currentMax);
                // alert("currentMin" + that.currentMin);
                //that.currentActiveSpan.innerText = that.currentPage;
                var _a = document.createElement("A");
                _a.href = "#";
                _a.onclick = that.reView;
                _a.innerText = pageCode;
                that.currentActiveSpan.appendChild(_a);
                that.currentActiveSpan.className = "on";
                that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@2
                //that.createNextPage();
                that.createEndPage();
            } //end if
        } //end if
    };
    this.toHomePage = function () {
        //去到首页
        if (that.pages == 0) return;
        if (that.currentPage != 1) {//切组
            that.pageDivObj.innerHTML = "";
            that.init();
        } //end if
        that.currentPage = 1;
        that.currentMin = 1;
        that.currentMax = that.initMaxPage;
        that.query();
    };
    this.toEndPage = function () {
        //去到未页
        if (that.pages == 0 || that.currentPage == that.pages) return;
        if (true) {//切组条件修改，此条件作废,临时设为true
            that.pageDivObj.innerHTML = "";
            that.createHomePage();
            //that.createPrePage();
            var pageCode = 1;
            var n = 1;
            while (pageCode <= that.pages) {
                if (n > that.initMaxPage - 1) {
                    n = 1;
                }
                n++;
                pageCode++;
            }

            pageCode = that.pages - (n - 2);
            for (var j = 1; j < n; j++) {
                var _li = document.createElement("li");

                if (pageCode == that.pages) { //初始化时第一页为活动页
                    var _a = document.createElement("A");
                    _a.href = "#";
                    _a.onclick = that.reView;
                    _a.innerText = pageCode;
                    _li.appendChild(_a);
                    _li.className = "on";
                    that.currentActiveSpan = _li;
                    pageCode++;
                } else {
                    var _a = document.createElement("A");
                    _a.href = "#";
                    _a.onclick = that.reView;
                    _a.innerText = pageCode;
                    _li.appendChild(_a);
                    pageCode++;
                }
                that.pageDivObj.appendChild(_li);
            }

            //that.createNextPage();
            that.createEndPage();
        } //end if
        that.currentPage = that.pages;
        that.currentMin = that.pages - (n - 2);
        that.currentMax = that.pages;
        // alert("currentMin: " + that.currentMin);
        //alert("currentMax: " + that.currentMax);
        // alert("pages: " + that.pages);
        that.query();
    };

    this.next = function () {
        //下一页
    };
    this.pre = function () {
        //上一页
    };
    this.update = function (count) {
        //更新分页系统
        this.totolCount = count;
        that.pageDivObj.innerHTML = "";
        this.init();
    };
    this.createPrePage = function () {

        var _li = document.createElement("li");
        var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.pre;
        _a.innerText = "上一页";
        _li.appendChild(_a);
        this.pageDivObj.appendChild(_li);
    };
    this.createNextPage = function () {

        var _li = document.createElement("li");
        var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.next;
        _a.innerText = "下一页";
        _li.appendChild(_a);
        this.pageDivObj.appendChild(_li);
    };
    this.createHomePage = function () {
        var homeSpan = document.createElement("li");
        var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.toHomePage;
        _a.innerText = "首页";
        homeSpan.appendChild(_a);
        this.pageDivObj.appendChild(homeSpan);
    };
    this.createEndPage = function () {
        var _li = document.createElement("li");
        var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.toEndPage;
        _a.innerText = "未页(" + this.pages + ")";
        _li.appendChild(_a);
        this.pageDivObj.appendChild(_li);
    }
}





 </script>
 <script>
   var psys;
   window.onload = function() {
    psys = new PageSystem(1120, "pageDiv", 10, showMsg); //总记录数, 分页系统容器，每组10页,回调
    psys.init();
  }
  
  function showMsg(currentPage, pageSize) {
    //回调方法自定义，两个参数，第一个为当前页，第二个为每页记录数
    /****************将currentPage和pageSize请求数据更新列表,最好使用ajax技术******************/
    alert("请求数据要的相应参数>> currentPage: "+ currentPage + " pageSize: " + pageSize);
  }
   
   /*****如果要更新分页系统请如下操作******/
    //psys.update(count); //@count 为记录总数
    function updatePageSys() {
     
     psys.update(150); //@count 为记录总数
   }
  </script>
  <style>
    #pageDiv{
      font-size:13px;
    }
  </style>
</head>
<body>
  <div class="list_page">
	<ul id="pageDiv"></ul>
  </div>
  <br/><br/>
  <a href="#" οnclick="updatePageSys();"/>更新分页系统</a>
  
  
  
<DIV class=list_page>
<UL id=pageDiv>
<LI><A href="#">首页</A></LI>
<LI><A href="#">1</A></LI>
<LI class="on"><a>2</a></LI>
<LI><A href="#">3</A></LI>
<LI><A href="#">4</A></LI>
<LI><A href="#">5</A></LI>
<LI><A href="#">6</A></LI>
<LI><A href="#">7</A></LI>
<LI><A href="#">8</A></LI>
<LI><A href="#">9</A></LI>
<LI><A href="#">10</A></LI>
<LI><A href="#">未页(112)</A></LI></UL></DIV><BR><BR>
</body>
</html>

转载于:https://www.cnblogs.com/JangoJing/archive/2012/10/19/2731511.html

weixin_34185364
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页js 实现自动加载分页标签
01-14
用js 自动计算分页格式 自动计算显示个数 避免大量页影响样式
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7812
纯js 分页功能。
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
js分页实现，前端实现。
liuzijiang1123的专栏
01-05 4万+
主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格 的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt
JSTL JSP 自定义标签 分页
09-17
jh-plugins是一项基于JSTL的自定义标签(插件)库，致力于打造一处实现、任何项目通用的开源项目。 jh-plugins已实现标签库：分页 jh-plugins特点：高效、轻巧、简单、适用(可融合与任何B/S架构的java项目) jh-...
Vue.js 2分页组件-JavaScript开发
05-26
Vue分页2在1.5.0版上的重大更改：由于选项数量的增加，许多可选道具...Vue.js版本2的简单，通用且非侵入式分页组件。依赖项安装NPM脚本标签用法处理页面选择自定义事件事件总线Vuex依赖项Vue.js（> = 2.0.0-rc.1）。 [R
JQuery+Ajax通用分页导航（任意表）
07-15
)返回一个JSON对象，要求：jSON对象中必须有 // datarows columns pageCount这3个对象。 //数据格式必须为: List[]>（数据行） String[](列标题) 总页数int //第1步：将css和js目录放进web项目下 //第2步：将test....
vue-pagination-2:Vue.js 2分页组件
05-02
Vue.js版本2的简单，通用且非侵入式分页组件。 依存关系 Vue.js（> = 2.0.0 && <3.0.0）。 必需的。 CSS：Bootstrap 3或Bootstrap 4或Bulma。 安装 NPM npm install vue-pagination-2 导入脚本： import ...
基于ssm SQLserver高级分页查询，全网最优，返回形式简单，移植和扩建改动非常少
03-05
的数据不需要一个个加入js，哪怕你有1万个查询条件，你都不用怕，js中不需要 任何添加任何代码，你只需要把你的各搜索框加上 就能实现功能；偶合性非常低，通用性强；实现一个高级带条件的分页查询最多 10分钟；...
js-swiper-分页标签加进度条-自定义位置加进度条
07-30
js-swiper-分页标签加进度条-自定义位置加进度条
html+js实现分页功能
热门推荐
只如初见0706的博客
07-08 4万+
1、分页功能实现效果如下： 2、代码如下 <!DOCTYPE html > <html> <head> <title> 消息呈现 </title> <link rel="icon" href="picture.ico" type="image/x-icon" /> <script src="../js/j...
JS实现分页功能
大数据同盟会的博客
07-03 9969
JS实现分页功能
项目组自己编写的js分页标签（百度分页）
weixin_30315723的博客
05-11 108
Oracle根据当前页码和条数算开始页和结束页： int startrow = (currentPage - 1) * size + 1; int endrow = currentPage* size; /** * 分页工具 */ (function($) {$.extend({PageUtil:{}})})(jQuery); (function($) { ...
html中js控制分页,js控制分页打印、打印分页示例
weixin_36098128的博客
06-16 845
pageEncoding="UTF-8"%>javascript打印-打印页面设置-打印预览代码.Noprint{display:none;}.PageNext{page-break-after: always;}function printsetup(){// 打印页面设置wb.execwb(8,1);}function printpreview(){// 打印页面预览wb.execwb(...
jsp利用自定义标签制作精美的分页标签
fengyunanxiu的博客
08-31 1741
思想：当查出来的数据很多时（例如：超过10万），采用精简的默认的样式，也就是指只显示首尾页上一页 和下一页。当总页数不大于9页时，把所有的具体页码以按钮形式显示出来，页码按钮如果等于当前则显于背景色。当总页数大于9页，分页样式以另外的样式显示，当当前页小于3页或大于等于后两页时，显示前六页的按钮和后两页按钮，其他情况显示前两页和后两页按钮，中间显示当前页码的和它后5页的页码，并且支持页码跳转，废话
简单的分页代码js实现
SeekerTime
07-10 8676
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
jsp标签--自定义分页标签
weixin_30576827的博客
07-12 95
1.定义分页标签的xml文件，需要引用taglib标签库，在<tag></tag>里面定义自定义标签 <?xml version="1.0" encoding="UTF-8"?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org...
js分页实现，前端实现
qq_43682438的博客
11-13 9693
js分页实现，前端实现
基于springboot+mybtais写一个通用的分页查询接口
最新发布
03-08
基于springboot mybatis，可以通过编写一个通用的分页查询接口来实现分页查询。具体实现可以参考以下步骤： 1. 定义一个通用的分页查询接口，包括查询条件、分页参数等。 2. 在mapper.xml中编写对应的SQL语句，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值