js制作分页

偏执的太偏执、 2024-04-18 17:33 62阅读 0赞

欢迎大家一起交流学习n(\*≧▽≦\*)n

效果：

![20190910112111185.gif][]

**图标引入方式为symbol引用**

**html:**

<div class="page" style="margin: 400px;">
    </div>
    <script src="./js/paging.js"></script>
    <script>
        $(".page").Pagination({
            pageSize: 20,
            limits: [10, 20, 30, 40, 50],
            curPage: 1,
            total: 100,
            callback: function (pageSize,curPage) {
                console.log(pageSize,curPage)
            }
        });
    </script>

**js:**

(function ($) {
        $.fn.Pagination = function (options) {
            let config = $.extend({
                pageSize: 20,
                limits: [10, 20, 30, 40, 50],
                total: 100,
                curPage: 1,
                callback: {}
            }, options);
            var $container = $(this);
            var pagination = new Pagination();
            pagination.init($container, config);
            return pagination;
        }
    
        function Pagination() {
            this.curPage = 1;
            this.pageSize = 0;
            this.totalNum = 1;
            this.totalPage = 1;
        }
    
        Pagination.prototype = {
            init: function ($container, config) {
                this.$container = $container;
                this.config = config;
                this.totalNum = config.total;
                this.pageSize = config.pageSize;
                this.curPage = config.curPage;
                let limits = config.limits;
                let that = this;
                let $divPage = $('<div id="firstPage" class="usePage disablePage">\n' +
                    '        <svg class="icon" aria-hidden="true">\n' +
                    '            <use xlink:href="#icon-diyiye"></use>\n' +
                    '        </svg>\n' +
                    '    </div>\n' +
                    '    <div id="previousPage" class="usePage disablePage">\n' +
                    '        <svg class="icon" aria-hidden="true">\n' +
                    '            <use xlink:href="#icon-shangyiye"></use>\n' +
                    '        </svg>\n' +
                    '    </div>\n' +
                    '    <div class="pageNum">\n' +
                    '        <span id="firstJumpPage">1</span>\n' +
                    '        <span>/</span>\n' +
                    '        <span id="lastJumpPage">3</span>\n' +
                    '    </div>\n' +
                    '    <div id="nextPage" class="usePage">\n' +
                    '        <svg class="icon" aria-hidden="true">\n' +
                    '            <use xlink:href="#icon-xiayiye"></use>\n' +
                    '        </svg>\n' +
                    '    </div>\n' +
                    '    <div id="lastPage" class="usePage">\n' +
                    '        <svg class="icon" aria-hidden="true">\n' +
                    '            <use xlink:href="#icon-zuihouyiye"></use>\n' +
                    '        </svg>\n' +
                    '    </div>\n' +
                    '    <div class="dividerPage"></div>\n' +
                    '    <div class="jumpPage">\n' +
                    '        <input id="jumpPageText" type="text">\n' +
                    '    </div>\n' +
                    '    <div class="jumpToPage">跳转</div>\n' +
                    '    <div class="pageSelect">\n' +
                    '        <select class="selectOption">\n' +
                    '        </select>\n' +
                    '    </div>');
                this.$container.append($divPage);
                let selectOption = document.getElementsByClassName("selectOption")[0];
                if(limits.indexOf(this.pageSize)<0) {
                    this.pageSize = limits[0];
                }
                for (let i = 0; i < limits.length; i++) {
                    if (limits[i] == this.pageSize) {
                        selectOption.innerHTML = selectOption.innerHTML + '<option value="' + limits[i] + '" selected="selected">' + limits[i] + '条/页</option>'
                    } else {
                        selectOption.innerHTML = selectOption.innerHTML + '<option value="' + limits[i] + '">' + limits[i] + '条/页</option>'
                    }
                }
                this.totalPage = Math.ceil(that.totalNum / that.pageSize);
                this.pagesJump();
    
                $(".selectOption").change(function () {
                    that.pageSize = $(this).children('option:selected').val();
                    that.totalPage = Math.ceil(that.totalNum / that.pageSize);
                    that.curPage = 1;
                    that.pagesJump();
                });
    
                $(".jumpToPage").click(function () {
                    that.curPage = parseInt($("#jumpPageText").val());
                    that.pagesJump();
                });
    
                $("#firstPage").click(function () {
                    that.curPage = 1;
                    that.pagesJump();
                });
    
                $("#previousPage").click(function () {
                    that.curPage = parseInt($("#firstJumpPage").html()) - 1;
                    that.pagesJump();
                });
    
                $("#lastPage").click(function () {
                    that.curPage = that.totalPage;
                    that.pagesJump();
                });
    
                $("#nextPage").click(function () {
                    that.curPage = parseInt($("#firstJumpPage").html()) + 1;
                    that.pagesJump();
                })
            },
            isDisable: function () {
                $(".usePage").attr("class", "usePage");
                if (this.curPage <= 1) {
                    $('#firstPage').addClass("disablePage");
                    $('#previousPage').addClass("disablePage");
                }
                if (this.curPage >= this.totalPage) {
                    $('#nextPage').addClass("disablePage");
                    $('#lastPage').addClass("disablePage");
                }
            },
            pagesJump: function () {
                if (this.curPage <= 0 || isNaN(this.curPage)) {
                    this.curPage = 1;
                } else if (this.curPage > this.totalPage) {
                    this.curPage = this.totalPage;
                }
                this.isDisable();
                $("#firstJumpPage").html(this.curPage);
                $("#lastJumpPage").html(this.totalPage);
                this.config.callback(this.pageSize, this.curPage);
            }
        }
    })(jQuery);

**css:**

.icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    
    .usePage {
        float: left;
        margin-left: 5px;
        width: 30px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background-color: #EEF7FF;
        color: #1188DD;
        cursor: pointer;
    }
    
    .disablePage {
        background-color: #F1F3F5;
        color: #999999;
        cursor: auto;
        pointer-events: none;
    }
    
    .pageNum {
        float: left;
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 12px;
        color: #333333;
    }
    
    .dividerPage {
        float: left;
        width: 1px;
        height: 28px;
        margin-left: 10px;
        background-color: #E9ECEF;
    }
    
    .jumpPage {
        float: left;
        margin-left: 15px;
        margin-right: 2px;
    }
    
    .jumpPage>input {
        border: 1px solid #CED4DA;
        width: 33px;
        height: 26px;
        line-height: 26px;
        border-radius: 4px;
        padding: 0 5px 0 5px;
    }
    
    .jumpToPage {
        float: left;
        width: 36px;
        height: 28px;
        margin-left: 5px;
        cursor: pointer;
        border-radius: 4px;
        color: #1188DD;
        font-size: 12px;
        line-height: 28px;
        text-align: center;
        background: #EEF7FF;
        font-family: PingFangSC-Regular;
    }
    
    .pageSelect {
        float: left;
        margin-left: 30px;
        cursor: pointer;
    }
    
    .selectOption {
        height: 28px;
        width: 90px;
        border: 1px solid #e1e6eb;
        border-radius: 2px;
        font-size: 12px;
        padding-left: 10px;
    }

[20190910112111185.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d023ae8c51194661923f84bf9dc909ae.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 js制作分页

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910112111185.gif][] **图标引入方式为symbol引用** **html:**...

偏执的太偏执、/ 2024年04月18日 17:33/ 0 赞/ 63 阅读

相关 PHP数组内容制作分页功能

首先制作分页功能，需要使用GET传值接收页面位置我们这里使用一个数组，通过制作分页功能来输出不同位置的数组元素 <?php for($i=1;$i<=1

男娘i/ 2023年07月25日 11:26/ 0 赞/ 2 阅读

相关制作分页工具类,实现分页操作JSP+Servlet+数据库

分页操作基于jsp+Servlet+数据库的分页操作每页限制显示的条数,显示总页数,总条数.可以看上一页下一页操作说明 :需先进入到controller层的接口

快来打我*/ 2022年11月07日 14:39/ 0 赞/ 219 阅读

相关 js 列表，分页

<pre name="code" class="javascript">$(document).ready(initPage); var pag

秒速五厘米/ 2022年09月23日 08:08/ 0 赞/ 167 阅读

相关 JS----dataTables分页排序

博客来源：[http://blog.csdn.net/damys/article/details/39076731][http_blog.csdn.net_damys_arti

青旅半醒/ 2022年08月18日 14:11/ 0 赞/ 292 阅读

相关 js分页

function initPagination(){ if(total == 0){ return; }

深碍√TFBOYSˉ_/ 2022年06月17日 12:39/ 0 赞/ 174 阅读

相关 js数据分页

> 这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！整体思想框架：

绝地灬酷狼/ 2022年03月22日 15:10/ 0 赞/ 277 阅读

相关 thinkphp分页效果的制作，按查询条件分页正确做法

PHP代码： <?php namespace Home\Controller; use Think\Controller; use Home\

梦里梦外;/ 2021年12月22日 07:19/ 0 赞/ 280 阅读

相关 PHP分页显示制作详细讲解

1、前言分页显示是一种非常常见的浏览和显示大量数据的方法，属于web编程中最常处理的事件之一。对于web编程的老手来说，编写这种代码实在是和呼吸一样自然，但是对于初学者

缺乏、安全感/ 2021年09月12日 03:36/ 0 赞/ 660 阅读

相关 vue.js 分页

先上样式的代码 <style> .fenye { font-weight: 900;height: 40px;text-align: center;color: 88

迈不过友情╰/ 2021年08月28日 17:07/ 0 赞/ 419 阅读