自己编写JQuery扩展分页插件

Bertha 。 2022-09-24 12:14 150阅读 0赞

## 背景 ##

公司分页插件用到了kkpager  
[https://github.com/pgkk/kkpager][https_github.com_pgkk_kkpager]  
缺点：不是绑定Dom节点的初始化方式，单页面只能使用一个分页插件，假如一个页面有多个分页需求就不行了，前端给出来的解决方案是复制多份，假如有100个分页呢？难道复制100份？

故让前端基于原有的样式重写了一个HTML分页Dom，我在此基础上修改  
前端给过来的Html内容如下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>分页</title>
            <link rel="stylesheet" href="pager.css" />
        </head>
        <body>
            <div class="pageBox">
                <span>
                    
                    <span title="首页" class="disabled">首页</span>
                    <span title="上一页" class="disabled">上一页</span>
                    <span title="第一页" class="curr">1</span>
                    <a href="javascript:void(0);" title="第二页">2</a>
                    <a href="javascript:void(0);" title="第三页">3</a>
                    <a href="javascript:void(0);" title="第四页">4</a>
                    <a href="javascript:void(0);" title="第五页">5</a>
                    <a href="javascript:void(0);" title="第六页">6</a>
                    <span>...</span>
                    <a href="javascript:void(0);" title="下一页">下一页</a>
                    <a href="javascript:void(0);" title="尾页">尾页</a>
                </span>
                <span>
                    当前第 <span class="colorRed">1</span> 页/共<span>6</span>页
                    转到第<input type="text" value="" class="gopage"/>页
                </span>
            </div>
        </body>
    </html>

## 功能说明 ##

JQuery拓展插件功能说明：
    1、插件使用在Ajax无刷新数据加载和分页的情况
    2、自动忽略中间页面
    
    使用说明：
    1、Head里面加载Css和JS
    <link rel="stylesheet" href="pager.css" />
    <script type="text/javascript" src="jquery-1.11.1.min.js" ></script>
    
    2、中间Body加上
    <div class="pageBox">
        <span class="pageSpan"></span>
    </div>
    
    3、body结束后，加载JS
    <script type="text/javascript" src="pager.js" ></script>
    
    4、初始化分页
    <script> $(function() { //分页 $(".pageSpan").createPage({ pageIndex:8, totalPage:22, backFn:function(pageIndex){ console.log(pageIndex); } }); }); </script>

page.js

/** * @Description 分页插件，使用该插件，必须放在底部，等Dom节点渲染完毕才能使用 * @Author Nick * @Date 2016/07/30 * @Version 1.0 */
    (function($) { 
        var pager = {
            init : function(obj, page) { 
                return (function() { 
                    pager.fillHtml(obj, page);
                    pager.bindEvent(obj, page);
                })();
            },
    
            //填充Html
            fillHtml : function(pageSpan, page) { 
                return (function() { 
                    pageSpan.empty();
                    //首页 上一页
                    if(page.pageIndex > 1) {
                        pageSpan.append('<a href="javascript:;" title="首页" class="firstPage">首页</a>');
                        pageSpan.append('<a href="javascript:;" title="上一页" class="prevPage">上一页</a>');
                    } else {
                        pageSpan.append('<span title="首页" class="disabled">首页</span>');
                        pageSpan.append('<span title="上一页" class="disabled">上一页</span>');
                    }
    
                    //中间页码
                    if(page.totalPage <= 3) {
                        for(var i = 1; i <= page.totalPage; i++) {
                            if(page.pageIndex == i) {
                                pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
                            } else {
                                pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                            }
                        }
                    } else if(page.totalPage > 3) {
                        if(page.pageIndex - 2 <= 1 && page.pageIndex +2 <= page.totalPage) {
                            for(var i = 1; i <= (page.pageIndex +2); i++) {
                                if(page.pageIndex == i) {
                                    pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
                                } else {
                                    pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                                }
                            }
                            pageSpan.append('<span>...</span>');
                        } else if(page.pageIndex - 2 > 1 && page.pageIndex +2 >= page.totalPage) {
                            pageSpan.append('<span>...</span>');
                            for(var i = (page.pageIndex - 2); i <= page.totalPage; i++) {
                                if(page.pageIndex == i) {
                                    pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
                                } else {
                                    pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                                }
                            }
                        } else if(page.pageIndex - 2 <= 1 && page.pageIndex +2 >= page.totalPage) {
                            for(var i = 1; i <= page.totalPage; i++) {
                                if(page.pageIndex == i) {
                                    pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
                                } else {
                                    pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                                }
                            }
                        } else if(page.pageIndex - 2 > 1 && page.pageIndex +2 <= page.totalPage) {
                            pageSpan.append('<span>...</span>');
                            for(var i = (page.pageIndex - 2); i <= (page.pageIndex + 2); i++) {
                                if(page.pageIndex == i) {
                                    pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
                                } else {
                                    pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                                }
                            }
                            pageSpan.append('<span>...</span>');
                        }
                    }
    
    
                    //下一页、尾页
                    if(page.pageIndex != page.totalPage) {
                        pageSpan.append('<a href="javascript:;" title="下一页" class="nextPage">下一页</a>');
                        pageSpan.append('<a href="javascript:;" title="尾页" class="endPage">尾页</a>');
                    } else {
                        pageSpan.append('<span title="上一页" class="disabled">下一页</span>');
                        pageSpan.append('<span title="尾页" class="disabled">尾页</span>');
                    }
                    pageSpan.append('<span>当前第 <span class="colorRed">'+page.pageIndex+'</span> 页/共<span>'+page.totalPage+'</span>页');
                })();
            },
    
            //绑定事件
            bindEvent : function(obj, page) { 
                //第几页
                return (function() { 
                    //数字点击事件
                    obj.off('click', 'a.tcdNumber');
                    obj.off('click', 'a.prevPage');
                    obj.off('click', 'a.nextPage');
                    obj.off('click', 'a.firstPage');
                    obj.off('click', 'a.endPage');
                    obj.on('click', 'a.tcdNumber', function() { 
                        var pageIndex = parseInt($(this).html());
                        pager.fillHtml(obj, {
       "pageIndex":pageIndex, "totalPage":page.totalPage});
                        if(typeof(page.backFn == "function")) {
                            page.backFn(pageIndex);
                        }
                    });
                    //前一页点击事件
                    obj.on('click', 'a.prevPage', function() { 
                        var pageIndex = parseInt(obj.children('span.curr').html());
                        pager.fillHtml(obj, {
       "pageIndex":pageIndex-1, "totalPage":page.totalPage});
                        if(typeof(page.backFn == "function")) {
                            page.backFn(pageIndex-1);
                        }
                    });
                    //下一页点击事件
                    obj.on('click', 'a.nextPage', function() { 
                        var pageIndex = parseInt(obj.children('span.curr').html());
                        pager.fillHtml(obj, {
       "pageIndex":pageIndex+1, "totalPage":page.totalPage});
                        if(typeof(page.backFn == "function")) {
                            page.backFn(pageIndex+1);
                        }
                    });
                    //首页
                    obj.on('click', 'a.firstPage', function() { 
                        pager.fillHtml(obj, {
       "pageIndex":1, "totalPage":page.totalPage});
                        if(typeof(page.backFn == "function")) {
                            page.backFn(1);
                        }
                    });
                    //尾页
                    obj.on('click', 'a.endPage', function() { 
                        pager.fillHtml(obj, {
       "pageIndex":page.totalPage, "totalPage":page.totalPage});
                        if(typeof(page.backFn == "function")) {
                            page.backFn(page.totalPage);
                        }
                    });
                })();
            }
        }
    
        //扩展JQuery
        $.fn.createPage = function(options) { 
            var page = $.extend({
                pageIndex : 1,
                totalPage : 10,
                backFn : function(p) { 
                }
            }, options);
            pager.init(this, page);
        }
    })(jQuery);

pager.css

.pageBox{ text-align: center; margin: 20px auto; color: #999; font-size: 14px; }
    .pageBox a{ float: none; border: 1px solid #d5d5d5; height: 28px; line-height: 28px; padding: 0 9px; display: inline-block; cursor: pointer; background: #fff; text-decoration: none; color: #333; margin-right: 5px; }
    .pageBox a:hover{ border-color: #999999; }
    .pageBox .colorRed{ color: red; }
    .pageBox .gopage{ width: 36px; height: 22px; line-height: 22px; color: #999; text-align: center; margin-left: 1px; margin-right: 1px; border: 1px solid #c3c3c3; position: relative; left: 0px; top: 0px; outline: none; }
    .pageBox .curr{ background: none repeat scroll 0 0 #c3c3c3; color: #fff; height: 30px; line-height: 30px; padding: 0 10px; z-index: 999; margin-right: 5px; display: inline-block; }
    .pageBox .disabled{ float: none; display: inline-block; padding: 0 9px; margin-right: 5px; border: 1px solid #d5d5d5; background-color: #FFF; color: #DFDFDF; line-height: 28px; }

页面效果：  
![分页效果][20160730121322595]

欢迎拍砖指正和优化升级等！  
联系人：Nick 953374957

[https_github.com_pgkk_kkpager]: https://github.com/pgkk/kkpager
[20160730121322595]: /images/20220719/20f5d7c47b7e495e8b4bb61e3f41e730.png