自制jq分页插件

Little_XM 发布于2019-08-29 11:32 / 2531人阅读

摘要：由于第一次写插件，中间有借鉴别人的代码。添加选中蓝色背景上一页下一页点击的页数下一页上一页用法总页数当前选中页回调函数

由于第一次写jq插件，中间有借鉴别人的代码。

 (function(){
    var ms = {

        fillHtml: function(obj, option) {
            obj.empty();
            var totalPage = option.pageCount,
                pageHtml = "",
                dotHtml = "...",
                tempHtml = "";

            if (option.currentPage > 5) {
                tempHtml = "1
2
...";

                for(var i = option.currentPage - 2 ; i <= (option.currentPage + 2 > totalPage ? totalPage : option.currentPage + 2); i++) {
                    var temp = "" +i+ "";
                    if (option.currentPage === i ) {
                        temp = ""+ i +"";
                    }

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };

            }else {

                for(var i = 1; i <= ( 6 > totalPage ? totalPage : 6); i++) {
                    var temp = "" +i+ "";
                    if (option.currentPage === i ) {                //添加选中蓝色背景
                        temp = ""+ i +"";
                    };

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };
            }
            
            pageHtml = ""+
                        "上一页" + tempHtml +
                        pageHtml + dotHtml +
                        "下一页";
            
            obj.append(pageHtml);
        },

        bindEvent: function(obj, option) {

            $(obj).on("click",".page-num",function(){
                if ($(this).parent("li") && $(this).parent("li").hasClass("current-page")) {
                    return;
                }
                var current = Number( $(this).text() );                //点击的页数
                ms.fillHtml(obj, {"currentPage": current, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".next-page",function(){
                var current = Number( $(".current-page a").text() );                //下一页
                if (current === option.pageCount){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current + 1, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".prev-page",function(){
                var current = Number( $(".current-page a").text() );                //上一页
                if (current === 1){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current-1, "pageCount": option.pageCount});
                option.backFunction();
            });
        },
        
        init: function(obj, option){

            return (function(){
                ms.fillHtml(obj, option);
                ms.bindEvent(obj, option);
            })();
        }
    };


    $.fn.creatPage = function(option) {

        var initOption = {
                pageCount: 10,
                currentPage: 1,
                backFunction: function(){}
        };
        option.pageCount = Number(option.pageCount);
        option.currentPage = Number(option.currentPage);
        
        var option = $.extend(initOption, option);
        
        ms.init(this, option);
    }
})()

HTML

用法

$("#pageCont").creatPage({
        pageCount: 18,            //总页数
        currentPage: 1,            //当前选中页
        backFunction: function(){    //回调函数
            
        }
    });

私有云服务器托管 jq插件 jq滚动条插件 jq弹出层插件 js 数据分页插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111710.html

自制jq分页插件

摘要：由于第一次写插件，中间有借鉴别人的代码。添加选中蓝色背景上一页下一页点击的页数下一页上一页用法总页数当前选中页回调函数由于第一次写jq插件，中间有借鉴别人的代码。 (function(){ var ms = { fillHtml: function(obj, option) { obj.empty(); v...

eternalshallow 2019-08-05 10:20 评论0 收藏0
自制jq分页插件

摘要：由于第一次写插件，中间有借鉴别人的代码。添加选中蓝色背景上一页下一页点击的页数下一页上一页用法总页数当前选中页回调函数由于第一次写jq插件，中间有借鉴别人的代码。 (function(){ var ms = { fillHtml: function(obj, option) { obj.empty(); v...

or0fun 2019-08-20 12:02 评论0 收藏0
前端常用插件、工具类库汇总（上）

摘要：函数库动画库动画库，也是目前最通用的动画库。下拉框级联选择器移动端最好用的的筛选器组件联动筛选移动端最好用的的筛选器组件联动筛选颜色选择器时间选择器时间日期处理是一个解析，验证，操作和显示日期和时间的类库。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在开发中，我们经常会将一些常用的代码块、功能块进行封装，...

txgcwm 2019-08-23 13:06 评论0 收藏0
前端常用插件、工具类库汇总（下）

摘要：上一篇前端常用插件工具类库汇总上内容摘要动画库滚动库轮播图滚屏弹出框消息通知下拉框级联选择器颜色选择器时间日期处理表单验证分页插件本篇延续上一篇的内容继续给大家带来一系列关于前端插件工具类的内容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言对本文感兴趣可以先加个收藏，也可以转发分享给身边的小伙伴，以后遇到...

ideaa 2019-08-23 13:08 评论0 收藏0
jq easyui数据网络的分页过程

摘要：在涉及到组件的分页功能时，遇到了一点问题。由于数据较多，这边不予展示。返回的数据必须是符合要求的数据，格式如下必须带有属性，属性值为总共的数据条数，是这一页的数据内容，以数组对象的形式返回。第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

Rainie 2019-08-21 10:53 评论0 收藏0