自己封装的js分页插件，好处是可以自定义样式

最新推荐文章于 2024-04-20 22:10:42 发布
最新推荐文章于 2024-04-20 22:10:42 发布
阅读量3.3k 收藏 3
点赞数 1
分类专栏： js web前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011511086/article/details/77896304
版权

页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">    
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title> </title>
    <style type="text/css">
        /*页码样式 begin*/
        ol, ul { list-style: none; }
        .pageList { float: right; padding: 20px 0 0 0; margin-right: -5px; }
        .pageList li { display: list-item; text-align: -webkit-match-parent; float: left; margin: 0 2px; }        
        .pageList a { text-decoration: none; color: #333; display: block; background: #f4f4f4; height: 30px; line-height: 30px; padding-left: 10px; padding-right: 10px; text-align: center; color: #3d3d3d; font-size: 14px; border: 1px solid #e2e2e2; }
        .pageList a:hover { border: 1px solid #ff0000; }
        .pageList .current span { display: inline-block; padding-left: 11px; padding-right: 11px; line-height: 32px; height: 32px; background: #ff6c60; color: #fff; }
        .pageList .pre a,
        .pageList .next a { width: auto; padding: 0 8px; }
        .pageList i { vertical-align: middle; font-style: normal; font-size: 16px; font-family: "\5b8b\4f53"; padding: 0 5px; position: relative; top: -2px; }
        .pageList .btn_hui { display: inline-block; padding-left: 10px; padding-right: 10px; line-height: 30px; height: 30px; border: 1px solid #e2e2e2; }
        .pageList .btn_hui span { display: block; color: #c2c2c2; height: 30px; line-height: 30px; }
        .pageList .dom { line-height: 32px; }
        /*页码 end*/
    </style>
</head>
<body style="">
    <div id="pageDiv" style="margin:0 auto;width:900px;"></div>
    <script type="text/javascript" src="content/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="content/js/pageCtrl.js" charset="GBK"></script>
    <script type="text/javascript">
        !function () {
            pageCtrl.page({
                domId: "pageDiv",//要绑定的元素id
                pageIndex: 14,//当前页码
                pageTotal: 20,//总页数
                //查询参数
                searchParam: { name: '鲁智深', type: 'ABS', color: '蓝色', id: 785 }
            });
        }();
    </script>
</body>
</html>


pageCtrl.js代码：

!function (w) {
    //删除字符串前后的空格
    String.prototype.trim = function () {
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }
    w.pageCtrl = {
        //自定义公共方法封装
        commonfn: {
            //获取url地址栏参数值
            queryString: function (name) {
                if (name == null || name == "" || name == undefined) {
                    var AllVars = window.location.search.substring(1);
                    return AllVars.split("&");
                }
                else {
                    var AllVars = window.location.search.substring(1);
                    var Vars = AllVars.split("&");
                    for (i = 0; i < Vars.length; i++) {
                        var Var = Vars[i].split("=");
                        if (Var[0] == name) return Var[1];
                    }
                    return "";
                }
            },
            //改变地址栏参数值
            changeParam: function (name, value) {
                var url = window.location.href;
                var newUrl = "";
                var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
                var tmp = name + "=" + value;
                if (url.match(reg) != null) {
                    newUrl = url.replace(eval(reg), tmp);
                }
                else {
                    if (url.match("[\?]")) {
                        newUrl = url + "&" + tmp;
                    }
                    else {
                        newUrl = url + "?" + tmp;
                    }
                }
                location.href = newUrl;
            },
            //只能输入金额
            clearNoNum: function (obj) {
                if (obj.value == "0") {
                } else {
                    var firstNum = obj.value.toString().substring(0, 1);
                    if (obj.value.length > 1 && firstNum == "0") {
                        var second = obj.value.toString().substring(1, 2);
                        if (second == "0") {
                            obj.value = "0";
                        }
                    }
                }
                //先把非数字的都替换掉，除了数字和.
                obj.value = obj.value.replace(/[^\d.]/g, "");
                //必须保证第一个为数字而不是.
                obj.value = obj.value.replace(/^\./g, "");
                //保证只有出现一个.而没有多个.
                obj.value = obj.value.replace(/\.{2,}/g, ".");
                //保证.只出现一次，而不能出现两次以上
                obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            },
            //删除小数后面的小数点
            delNumHouDian: function (obj) {
                var endstr = obj.value.substring(obj.value.length - 1);
                if (endstr == ".") {
                    obj.value = obj.value.substring(0, obj.value.length - 1);
                }
            },
            //小数格式化,num是要格式话的数字，len是要保留的小数位数
            cutXiaoNum: function (num, len) {
                var numStr = num.toString();
                if (len == null || len == undefined) {
                    len = numStr.length;
                }
                var index = numStr.indexOf('.');
                if (index == -1) {
                    index = numStr.length;
                    numStr += ".0000000000000";
                } else {
                    numStr += "0000000000000";
                }
                var newNum = numStr.substring(0, index + len + 1);
                return newNum;
            },
            //将时间戳转换为时间字符串格式15:18:13
            getTimeStampTime: function (timeStamp) {
                ///<summary>
                ///将时间戳转换为时间字符串，返回格式15:18:13
                /// </summary>
                /// <param name="timeStamp">时间戳，整数</param>
                var d = new Date(parseInt(timeStamp) * 1000);
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                if (d.getHours() == 0) {
                    h = "00";
                }
                if (d.getHours() < 10) {
                    h = "0" + d.getHours();
                }
                if (m == 0) {
                    m = "00";
                }
                if (d.getMinutes() < 10) {
                    m = "0" + d.getMinutes();
                }
                if (s == 0) {
                    s = "00";
                }
                if (d.getSeconds() < 10) {
                    s = "0" + d.getSeconds();
                }
                var time = h + ":" + m + ":" + s;
                return time;
            },
            //将时间戳转换为分钟格式16:08
            getTimeStampToMinutes: function (timeStamp) {
                ///<summary>
                ///将时间戳转换为时间字符串，返回格式15:18
                /// </summary>
                /// <param name="timeStamp">时间戳，整数</param>
                var d = new Date(parseInt(timeStamp));
                var h = d.getHours();
                var m = d.getMinutes();
                if (d.getHours() == 0) {
                    h = "00";
                }
                if (d.getHours() < 10) {
                    h = "0" + d.getHours();
                }
                if (m == 0) {
                    m = "00";
                }
                if (d.getMinutes() < 10) {
                    m = "0" + d.getMinutes();
                }
                var time = h + ":" + m;
                return time;
            },
            //根据cookie名称获取cookie的值
            getCookie: function (name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            }
        },
        //分页方法
        page: function (a) {
            //获取问号前面的地址
            var webUrl = window.location.href;
            var wh_Index = webUrl.indexOf("?");
            var qian_url = webUrl;
            if (wh_Index!=-1) {
                qian_url = webUrl.substring(0, wh_Index);
            }      
            var pfo = {
                domId: '',
                pageIndex: 1,
                pageTotal: 1,
                searchParam: '',
                perPageTxt: "\u4e0a\u4e00\u9875",//上一页
                nextPageTxt: "\u4e0b\u4e00\u9875",//下一页
                urlPerfix: qian_url
            }
            function render() {
                if (pfo.pageTotal == 1) {
                    return;
                }
                var htmlArr = [];
                htmlArr.push('<ol class="pageList">');
                if (pfo.pageIndex == 1) {
                    htmlArr.push('<li class="btn_hui"><span><i><</i>' + pfo.perPageTxt + '</span></li>');
                    htmlArr.push('<li class="current"><span>1</span></li>');
                } else {
                    htmlArr.push('<li class="pre"><a href="javascript:;"><i><</i>' + pfo.perPageTxt + '</a></li>');
                    if (a.jump==null) {//表示异步请求后台
                        var url = pfo.urlPerfix + "?p=1" + pfo.searchParam;
                        htmlArr.push('<li><a href="' + url + '">1</a></li>');
                    } else {
                        htmlArr.push('<li><a href="javascript:;" >1</a></li>');
                    }                  
                }
                if (pfo.pageTotal <= 10) {
                    for (var i = 1; i < pfo.pageTotal; i++) {
                        var pageIndex = i + 1;
                        if (pageIndex == pfo.pageIndex) {
                            htmlArr.push('<li class="current"><span>' + pageIndex + '</span></li>');
                        } else {
                            if (a.jump == null) {
                                var url = pfo.urlPerfix + "?p=" + pageIndex + pfo.searchParam;
                                htmlArr.push('<li><a href="' + url + '">' + pageIndex + '</a></li>');
                            } else {
                                htmlArr.push('<li><a href="javascript:;">' + pageIndex + '</a></li>');
                            }                          
                        }
                    }
                    if (pfo.pageIndex == pfo.pageTotal) {
                        htmlArr.push('<li class="btn_hui"><span><i>></i>' + pfo.nextPageTxt + '</span></li>');
                    } else {
                         htmlArr.push('<li class="next"><a href="javascript:;">' + pfo.nextPageTxt + '<i>></i></a></li>');
                    }
                } else if (pfo.pageTotal > 10) {
                    if (pfo.pageIndex > 5) {
                        htmlArr.push('<li class="dom">...</li>');
                    }
                    //当前页码左侧3个，从左往右
                    var arr = [];
                    var left01_pageIndex = 0;
                    var left02_pageIndex = 0;
                    var left03_pageIndex = 0;
                    if (pfo.pageIndex > 1) {
                        left01_pageIndex = pfo.pageIndex - 3;
                        left02_pageIndex = pfo.pageIndex - 2;
                        left03_pageIndex = pfo.pageIndex - 1;
                    }
                    if (left01_pageIndex > 1) {
                        arr.push(left01_pageIndex);
                    }
                    if (left02_pageIndex > 1) {
                        arr.push(left02_pageIndex);
                    }
                    if (left03_pageIndex > 1) {
                        arr.push(left03_pageIndex);
                    }
                    //右侧页码3个，从左往右
                    var right01_pageIndex = pfo.pageIndex + 1;
                    var right02_pageIndex = pfo.pageIndex + 2;
                    var right03_pageIndex = pfo.pageIndex + 3;
                    if (pfo.pageIndex > 1) {
                        arr.push(pfo.pageIndex);//当前页码
                    }
                    if (right01_pageIndex < pfo.pageTotal) {
                        arr.push(right01_pageIndex);
                    }
                    if (right02_pageIndex < pfo.pageTotal) {
                        arr.push(right02_pageIndex);
                    }
                    if (right03_pageIndex < pfo.pageTotal) {
                        arr.push(right03_pageIndex);
                    }
                    for (var j = 0; j < arr.length; j++) {
                        var pi = arr[j];
                        if (pi == pfo.pageIndex) {
                            //显示当前页码
                            htmlArr.push('<li class="current"><span>' + pi + '</span></li>');
                        } else {
                            if (a.jump == null) {
                                var url_cu = pfo.urlPerfix + "?p=" + pi + pfo.searchParam;
                                htmlArr.push('<li><a href="' + url_cu + '">' + pi + '</a></li>');
                            } else {
                                htmlArr.push('<li><a href="javascript:;">' + pi + '</a></li>');
                            }                         
                        }
                    }
                    //最后一页判断
                    var url_end = pfo.urlPerfix + "?p=" + pfo.pageTotal + pfo.searchParam;
                    var lastPageIndex = arr[arr.length - 1];
                    if (lastPageIndex + 1 < pfo.pageTotal) {
                        htmlArr.push('<li class="dom">...</li>');                    
                        if (a.jump == null) {
                            htmlArr.push('<li><a href="' + url_end + '">' + pfo.pageTotal + '</a></li>');
                        } else {
                            htmlArr.push('<li><a href="javascript:;" >' + pfo.pageTotal + '</a></li>');
                        }
                    } else if (lastPageIndex + 1 == pfo.pageTotal) {
                        if (a.jump == null) {
                            htmlArr.push('<li><a href="' + url_end + '">' + pfo.pageTotal + '</a></li>');
                        } else {
                            htmlArr.push('<li><a href="javascript:;">' + pfo.pageTotal + '</a></li>');
                        }
                    }
                    //下一页
                    if (pfo.pageIndex < pfo.pageTotal) {
                        htmlArr.push('<li class="next"><a href="javascript:;">' + pfo.nextPageTxt + '<i>></i></a></li>');
                    } else {
                        htmlArr.push('<li class="btn_hui"><span>' + pfo.nextPageTxt + '<i>></i></span></li>');
                    }
                }
                htmlArr.push('</ol>');
                $("#" + pfo.domId).html(htmlArr.join(""));
                //上一页
                $(".pageList .pre").click(function () {
                    var curr = pfo.pageIndex - 1;
                    if (curr < 1) {
                        curr = 1;
                    }                  
                    if (a.jump == null) {
                        location.href = pfo.urlPerfix + "?p=" + curr + pfo.searchParam;
                    } else {
                        a.jump(curr);                         
                    }
                });
                //下一页
                $(".pageList .next").click(function () {
                    var curr = pfo.pageIndex + 1;
                    if (curr > pfo.pageTotal) {
                        curr = pfo.pageTotal;
                    }       
                    if (a.jump == null) {
                        location.href = pfo.urlPerfix + "?p=" + curr + pfo.searchParam;
                    } else {                     
                        a.jump(curr);                        
                    }
                });
                $(".pageList li:not(.next):not(.pre) a").click(function () {
                    //console.log($(this).text());
                    a.jump(parseInt($(this).text()));
                });
            }
            //分页,需要依赖jquery包引用        
            //解析参数，参数配置例如（参数是个对象）：pfo.searchParam:{ name: '鲁智深', type: 'ABS', color: '蓝色', id: 785 }
            var cshu = "";
            if (a.searchParam != undefined && a.searchParam != null && typeof (a.searchParam) == "object") {
                var sz = [];
                for (var name in a.searchParam) {
                    var cs = name + "=" + a.searchParam[name];
                    sz.push(cs);
                }
                cshu = "&" + sz.join("&");
            }
            //绑定的元素的id
            pfo.domId = a.domId;
            pfo.pageIndex = a.pageIndex;
            pfo.pageTotal = a.pageTotal;
            pfo.searchParam = cshu;          
            render();
        }      
    };
}(window);






王焜棟琦
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【组件库】自定义分页器组件
m0_50785976的博客
07-14 422
分页器组件
封装的分页插件
12-10
总之，分页插件是Web开发中不可或缺的一部分，而封装自己的分页插件不仅可以提高工作效率，还能加深对前端开发技术的理解。对于这个简单的分页插件，我们可以从源代码中学习到如何有效地结合前端技术和后端服务，以...
VUE 在第三方封装组件中自定义样式(各框架通用）
何浩翔的博客
04-22 1728
现在很多框架都封装了非常好用的组件，但是当需要改动样式的时候，就有些麻烦了 这里假定使用的是quasar的table组件，很强大。 但是找了一圈，我想把某一列标题的字体调大，但是没办法 该怎么办呢，搜了官方文档的接口，好像没有针对这一块的说明。 没关系。chrome会很方便的帮我们过滤出选择器 右键需要调整的元素，让chrome帮我们定位 可以现在chrome开发者工具这里试一下diy样式，是否有效 有效则说明元素定位是你需要的，如果无效就再尝试定位一下 最后通过copy功能，直接就能复制选择器了 然
自制Javascript分页插件，支持AJAX加载和URL带参跳转两种初始化方式，可用于同一页面的多个分页和不同页面的调用...
weixin_30672019的博客
07-24 279
闲话部分 最近闲着实在无聊，就做了点小东西练练手，由于原来一直在用AspNetPager进行分页，而且也进行了深度的定制与原有系统整合的也不错，不过毕竟是用别人的，想着看自己能试着做出来不能，后台的分页插件已经有比较成熟的了，那就自己试着写一个前台分页吧。 话不多说，先上效果图： 优点与缺点 来说说优缺点吧，首先AspNetPager是后台分页控件...
封装个js分页插件
最新发布
无极低码
04-20 300
【代码】封装个js分页插件。
用js封装一个分页插件，很好用，支持异步加载数据（上一页、下一页、首页、尾页）
编程界明世隐的博客
01-11 1136
自己写了一个分页，觉得蛮好用，放上来大家看看 代码里面已经有比较详细的注释，就不解释了 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:0;padding:0; }
组件封装 - 分页组件
hmxs_hmbb的博客
10-21 1742
分页组件封装
封装好的javascript前端分页插件pagination
11-24
通过自己编写分页插件，我们可以精确控制分页的样式、行为以及与后端的交互方式，从而确保代码的简洁性和效率。此外，不依赖任何库的插件更有利于减少项目体积，提高加载速度。 **2. 安装与使用** 要使用`...
Angularjs自定义指令实现分页插件(DEMO)
12-12
在本文中，我们将深入探讨如何使用AngularJS的自定义指令来实现一个分页插件，以满足项目中分页查询数据的需求。这个示例基于AngularJS 1.0版本，并且实际调用了真实接口的数据。 首先，让我们了解AngularJS自定义...
jquery分页器插件，已经封装HTML和CSS3样式
10-28
在CSS3方面，这个插件可能包含了定制的样式，如颜色、字体、边框和过渡效果，这些可以让你的分页器看起来更现代，同时提高用户体验。CSS3的新特性，如伪类选择器（`:hover`, `:active`, `:focus`），动画和转换（`...
根据Bootstrap Paginator改写的js分页插件
10-20
Bootstrap Paginator 是一个流行的JavaScript分页插件，它基于Twitter Bootstrap框架设计，提供了美观且易于定制的分页功能。本文将深入探讨如何根据Bootstrap Paginator改写一个适合特定需求的js分页插件，并介绍...
js分页插件
04-21
常规翻页插件，调用超简单，支持一个页面显示多个分页，而不会引起联动
Paginationjs是一款简单实用且功能齐全的jQuery分页插件
08-08
Pagination.js是一款简单实用且功能齐全的jQuery分页插件。该jQuery分页插件提供多种数据源方式，众多的配置参数，回调函数，显示控制等，还提供了5套内置的分页条皮肤。
推荐一款优秀的前端分页插件 jPages
gitblog_00035的博客
03-17 436
推荐一款优秀的前端分页插件 jPages 如果你正在寻找一个简单、易用且功能强大的前端分页插件，那么我强烈建议你尝试一下jPages。 什么是jPages？ jPages 是一个轻量级的 JavaScript 插件，用于在网页中实现分页效果。它不需要依赖任何其他库，如 jQuery 或者 React，只需要 HTML 和 CSS 即可运行。 jPages 能用来做什么？ jPages 可以用于各种...
手把手教你如何玩转插件：分页插件（Pagehelper）
热门推荐
Cs_hnu_scw的博客
06-17 5万+
情景引入：小白：起床起床，，，快起床！！！我：怎么怎么了，小白你到底又怎么了。。小白：我发现在Web系统中，分页是一种很常见的功能，可是，我之前写的方法都比较麻烦，移植性不是很高，有没有什么好办法可以快速实现分页的呢？我：确实是的，分页功能几乎在每个系统中都是存在的，它的实现也是有很多种方式的。小白：对呀，有没有什么好方法呢？我：这个嘛，对于分页来说的话，其实我们在复杂的系统中，有很多特别的处理，...
封装分页组件--可直接调用
qq_33271461的博客
04-30 803
封装分页组件–可直接调用 已经封装好的page.js $("#pageIndex").html("<ul class=\"page\"><li id=\"first\">首页</li><li id=\"prve\">上一页</li><li class=\"disabled\"><font id=\"currentPage...
Jquery自定义分页插件
weixin_34399060的博客
01-08 169
效果： 　　 　 核心代码： 　自定义Jquery插件grid.js   //Jquery自定义分页插件 (function ($) { $.fn.grid = function (options) { var objGrid = $(this); var defaults = { action:"no...
MyBatis分页插件PageHelper自定义分页逻辑实现
天瑕的博客
11-29 4947
同时目前仅支持MySQL单表的分页操作，对于多表连接的分页需求，我这里暂时是没有自定义实现的，会退化成默认的追加limit子句的方式来实现（如果一定要实现，是否可以考虑使用视图View来实现？在看了看PageHelper源码中相关的实现后发现，PageHelper的分页逻辑是写在了AbstractHelperDialect类中，而不同的数据库分页实现是通过继承实现抽象方法的方式来实现的。上面是后台打印的日志，因为我这里的user表的主键是id字段，所以可以看到是能成功分页出来的。，感兴趣的可以查看。
原生js自定义分页插件
W Y L
02-17 526
一款简单的js分页插件，支持修改文本“首页”“上一页”“下一页”“末尾”。自定义总页数，当前页等分页功能代码。 css代码 *{ margin: 0; padding: 0; } html, body{ height: 100%; display: flex; justify-content: center; align-items: center; } .paging{ display: flex; align-items: center;
spigot插件如何封装一个生成一个可以自定义皮肤的实体的方法
06-09
要封装一个生成可以自定义皮肤的实体的方法，你可以按照以下的步骤进行操作： 1. 在你的插件中创建一个类来代表你的实体，可以继承自Bukkit的Entity类。 2. 在该类中添加一个可以设置皮肤的方法，可以使用Spigot...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王焜棟琦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值