后台管理系统——翻页插件

浅浅的花香味﹌ 2021-07-25 21:28 514阅读 0赞

# 翻页插件（含每页数目功能） #

(function ($) { 
        
        function TurnPage(options) { 
            // 添加翻页的页面元素
            this.wrap = options.wrap;
            // 总的数据条数
            this.allPageSize = options.allPageSize;
            // 当前页
            this.nowPage = options.nowPage;
            // 每页展示的数据数量
            this.pageSize = options.pageSize;
            // 翻页的时候回调函数
            this.changePageCb = options.changePageCb;
            // 100 / 15 总页数
            this.allPage = Math.ceil(this.allPageSize / this.pageSize);
            // 如果当前页 大于了总页数 则报错不渲染翻页
            if (this.nowPage > this.allPage) { 
                alert('页码错误');
                return false;
            }
            // this.init = function () { 
                // 渲染dom元素
                this.renderDom();
                // 绑定事件
                this.bindEvent();
            // }
        }
    
        TurnPage.prototype.renderDom = function () { 
            // 清空页面内要添加翻页的区间
            $(this.wrap).empty();
            // 每页条数元素
            var oDiv = $('<div class="page-size"><span>每页条数</span></div>');
            // 每页条数的输入框
            var oInp = $('<input class="size" type="number" min=1 max=50 value="' + this.pageSize +'"></input>');
            // 插入到页面中
            oDiv.append(oInp).appendTo(this.wrap);
            // 翻页部分
            var oUl = $('<ul class="my-turn-page"></ul>');
            // 展示三页
            // if (this.nowPage > 1) { 
            // $('<li class="prev-page">上一页</li>').appendTo(oUl);
            // $('<li class="num">1</li>').appendTo(oUl);
            // }
            // if (this.nowPage > 2) { 
            // $('<span>...</span>').appendTo(oUl);
            // }
            // $('<li class="num active">' + this.nowPage + '</li>').appendTo(oUl);
    
            // if (this.nowPage < this.allPage - 1) { 
            // $('<span>...</span>').appendTo(oUl);
            // }
            // if (this.nowPage != this.allPage) { 
            // $('<li class="num">' + this.allPage + '</li>').appendTo(oUl);
            // $('<li class="next-page">下一页</li>').appendTo(oUl);
            // }
            // 展示多页 中间5页
            // 渲染上一页按钮
            if (this.nowPage > 1) { 
                $('<li class="prev-page">上一页</li>').appendTo(oUl);
            }
            // 单独渲染第一页
            if (this.nowPage > 3) { 
                $('<li class="num">1</li>').appendTo(oUl);
            }
            // 渲染前面省略号
            if (this.nowPage > 4) { 
                $('<span>...</span>').appendTo(oUl);
            }
            // 中间五页
            for (var i = this.nowPage - 2; i <= this.nowPage + 2; i ++) { 
                if (i == this.nowPage) { 
                    $('<li class="num active">' + i + '</li>').appendTo(oUl);
                } else if (i > 0 && i <= this.allPage){ 
                    $('<li class="num">' + i + '</li>').appendTo(oUl);
                }
            }
            // 渲染后面省略号
            if (this.nowPage + 2 < this.allPage - 1) { 
                $('<span>...</span>').appendTo(oUl);
            }
            // 单独渲染最后一页
            if (this.nowPage + 2 < this.allPage) { 
                $('<li class="num">' + this.allPage + '</li>').appendTo(oUl);
            }
            // 渲染下一页
            if (this.nowPage < this.allPage) { 
                $('<li class="next-page">下一页</li>').appendTo(oUl);
            }
            $(this.wrap).append(oUl);
        }
        // 绑定事件
        TurnPage.prototype.bindEvent = function () { 
            var self = this;
            // 每页的点击事件 点击页码进行翻页
            $('.num', this.wrap).click(function () { 
                var page = parseInt($(this).text());
                self.changePage(page);
            });
            // 上一页点击事件
            $('.prev-page', this.wrap).click(function () { 
                if (self.nowPage > 1) { 
                    self.changePage(self.nowPage - 1);
                }
            });
            // 下一页点击事件
            $('.next-page', this.wrap).click(function () { 
                if (self.nowPage < self.allPage) { 
                    self.changePage(self.nowPage + 1);
                }
            });
            // 每页条数修改事件
            $('.size', this.wrap).change(function () { 
                // 修改条数， 总页数也跟着变化 当前页应当初始化为1
                self.pageSize = parseInt($(this).val());
                self.allPage = Math.ceil(self.allPageSize / self.pageSize);
                self.changePage(1);
            });
        }
        // 切换页码
        TurnPage.prototype.changePage = function (page) { 
            this.nowPage = page;
            // 重新渲染翻页
            this.renderDom();
            // 重新绑定事件
            this.bindEvent();
            // 执行翻页的回调函数 将一些数据返回给用户 用于页面数据修改 
            this.changePageCb && this.changePageCb({ 
                nowPage: this.nowPage,
                pageSize: this.pageSize,
            });
        }
    
        $.fn.extend({ 
            page: function (options) { 
                options.wrap = this;
                new TurnPage(options);
                // pageObj.init();
                return this;
            }
        })
    } (jQuery))

调用的时候方式如下：

$('.wrapper').page({ 
        allPageSize: 10,
        pageSize: 5,
        nowPage: 1,
        changePageCb: function (page) { 
            console.log('cb', page);
        }
    })

# 翻页插件（不含每页数目功能） #

(function () { 
    
        function TurnPage(options) { 
            this.wrap = options.wrap;
            this.curPage = options.curPage || 1;
            this.allPage = options.allPage || 1;
            this.changePage = options.changePage || function () { };
    
            if (this.curPage > this.allPage) { 
                alert('请输入正确页码');
                return false;
            }
            this.fillHTML();
            this.bindEvent();
        }
        TurnPage.prototype.fillHTML = function () { 
            $(this.wrap).empty();
            // 添加上一页按钮
            if (this.curPage > 1) { 
                $(this.wrap).append($('<li class="prev-page">上一页</li>'));
            } else { 
                $(this.wrap).remove('.prev-page');
            }
    
            // 填充中间页 
            // 如果当前页不是第一页 并且当前页与第一页之间差2页以及两页以上 添加第一页
            if (this.curPage != 1 && this.curPage - 2 > 1) { 
                $(this.wrap).append($('<li class="tab-number">1</li>'));
            }
    
            // 如果当前页的前两页 大于第二页 则出现省略号
            if (this.curPage - 2 > 2) { 
                $(this.wrap).append($('<span>...</span>'));
            }
    
            // 渲染当前页数左右两页
            for (var i = this.curPage - 2; i <= this.curPage + 2; i++) { 
                // 当前页要在1-allPage之间
                if(i > 0 && i <= this.allPage) { 
                    var oLi = $('<li class="tab-number">' + i + '</li>');
                    if (i == this.curPage) { 
                        oLi.addClass('cur-page')
                    }
                    $(this.wrap).append(oLi);
                }
            }
            // 当前页数与最后一页之间搁三页及以上出现省略号
            if (this.allPage - this.curPage > 3) { 
                $(this.wrap).append($('<span>...</span>'));
            }
            // 添加最后一页
            if (this.curPage + 2 < this.allPage) { 
                $('<li class="tab-number">' + this.allPage + '</li>').appendTo($(this.wrap));
            }
    
            // 添加下一页按钮
            if (this.curPage < this.allPage) { 
                $(this.wrap).append($('<li class="next-page">下一页</li>'));
            } else { 
                $(this.wrap).remove('.next-page');
            }
        }
    
        TurnPage.prototype.bindEvent = function () { 
            var self = this;
            $('.prev-page', this.wrap).click(function (e) { 
                self.curPage --;
                self.change();
            });
            $('.next-page', this.wrap).click(function () { 
                self.curPage ++;
                self.change();
            });
            $('.tab-number', this.wrap).click(function () { 
                var curPage = parseInt($(this).text());
                self.curPage = curPage;
                self.change();
            });
        }
        TurnPage.prototype.change = function () { 
            this.fillHTML();
            this.bindEvent();
            this.changePage(this.curPage);
        }
        $.fn.extend({ 
            turnPage: function (options) { 
                options.wrap = this;
                new TurnPage(options);
                return this;
            }
        })
    }())

调用的时候，使用方式如下：

$('#turn-page').turnPage({ 
    	allPage: 10,
        curPage: 4,
        changPage: function () { 
            console.log('----')
        }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，514人围观）

还没有评论，来说两句吧...

相关阅读

相关 react封装翻页插件

插件演示今天用react封装一个翻页插件，先给大家看一下效果：![在这里插入图片描述][20200404114451204.png] 翻页插件上面的文字是从后台获取

淩亂°似流年/ 2023年07月22日 03:42/ 0 赞/ 20 阅读

相关 vue 后台管理系统引入地图选点插件获取经纬度

地图插件文档：[https://elemefe.github.io/vue-amap/\/][https_elemefe.github.io_vue-amap]

小灰灰/ 2022年11月20日 00:59/ 0 赞/ 311 阅读

相关 DateTables表格管理分页插件

本文共四部分：官网 | 基本使用|遇到的问题|属性表一：官方网站：\[http://www.datatables[.NET][]/\] 二：基本使用：\[http://w

左手的ㄟ右手/ 2022年07月16日 14:18/ 0 赞/ 318 阅读

相关原生JavaScript实现前端翻页插件

之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天

本是古典何须时尚/ 2022年05月31日 02:35/ 0 赞/ 364 阅读

相关 jQuery实现翻页插件

推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 使用编辑器：vs code 主要用到的技术：css3 + jQuery 欢迎加QQ：

妖狐艹你老母/ 2022年05月26日 05:24/ 0 赞/ 209 阅读

相关 4.企业级权限管理系统分页后台

PageQuery public class PageQuery { @Getter @Setter

冷不防/ 2022年05月12日 02:20/ 0 赞/ 225 阅读

相关 BookBlock：一个实现翻页效果的jQuery插件

日期：2013-5-15 来源：[GBin1.com][] [![BookBlock：一个实现翻页效果的jQuery插件][BookBlock_jQuery]][BookB

深藏阁楼爱情的钟/ 2022年02月20日 13:22/ 0 赞/ 291 阅读

相关后台管理系统

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

「爱情、让人受尽委屈。」/ 2021年09月30日 09:12/ 0 赞/ 612 阅读

相关翻页

package mb.utils; import java.util.ArrayList; import java.util.List;

短命女/ 2021年09月23日 06:22/ 0 赞/ 433 阅读

相关后台管理系统——翻页插件

翻页插件（含每页数目功能） (function ($) { function TurnPage(options) {

浅浅的花香味﹌/ 2021年07月25日 21:28/ 0 赞/ 515 阅读