zoukankan      html  css  js  c++  java
  • 分页组件

    某日,在公司写一个简单的活动页面,活动见链接 ,这个页面业务叫简单,核心就是一个分页内容,活动很快就搞定了,然后呢,就整理分页功能,写成一个插件。

      嗯~~~说弄就弄。

      首先呢,先将页面分成两个区域:内容展示区和控件按钮(分页,上下页,跳转页等)展示区

    <div class="page-wrapper">
      <div class="page-content">
        内容区域
      </div>
      <div class="control-wrapper">
        分页按钮区域
      </div>
    </div>

      页面结构是弄好了,那么下面就要开始写JS了。

      之前呢,公司也有类似的分页功能的功能函数,其采用的做法是:

        1. 请求接口获取所有的数据

        2. 将所有数据分页渲染到几个div中,类似的方式

        3. 然后用 tab 页的形式,控制 div 显示隐藏 

      这样的话,如果数据比较少还是ok的,但如果数据比较多的话,会出现几个问题,

        1. 接口请求时间问题

        2. 数据渲染时间问题(采用的 dom 渲染方式,这样页面需要较长的时间才能加载显示出来,用户体验就很差)

      

    解决办法呢?

      一、接口改成分页请求

        1.  前端负责写一个模板页面,然后将分页模板交给后端;前端只需负责分页按钮的状态,给按钮加链接即可。(整个页面会刷新)

        2.  后端把总页数给前端,前端根据页码请求不同页面的内容

      二、优化渲染时间

        1. 把接口所有的数据请求出来

        2. 将所有数据分页,保存在一个对象中,如: { page: 1, content: .... }

        3. 分页渲染各个页面的内容

    在听到大佬的指点后,感觉自己的代码还是有问题的,故分享下思路和整体代码。后续优化完后,在对文章修改

    1、根据请求的数据,对数据进行分页保存。

    2、根据需求,在分页控制器内添加相应的html。

    3、渲染分页按钮和内容。

    当前完整代码如下。

    var Paganation = function (el, options) {
            /*
             * baseUrl          string      跳转链接(*)
             * curPage          number      当前页(*) 从1开始
             * totalPage        number      总页数(*)
             * arrow            boolean     是否有上下页
             * showLen          number      显示的按钮个数
             * pageDetail       boolean     是否显示具体的页码
             * isTail           boolean     首尾页
             * isShowInfo       boolean     是否显示页数详情
             * ellipsisClass    string      省略号类名
             * prefix           string      按钮类名前缀
             */
    
            this.el = el;
            let baseOptions = Object.assign({
                baseUrl: null,
                curPage: 1,
                totalPage: 100,
                isArrow: true,
                showNum: 10,
                prefix: 'page-',
                disabledClass: 'page-disabled',
                isTail: true,
                pageDetail: true,
                isShowInfo: true,
                ellipsisClass: ''
            }, options);
    
            /*
             * prev     string      上一页
             * next     string      下一页
             * start    string      首页
             * end      string      尾页
             * page     strign      具体的页码
             * info     string      页码详情
             */
            this.prevHTML = '';
            this.nextHTML = '';
            this.startHTML = '';
            this.endHTML = '';
            this.pageHTML = '';
            this.infoHTML = '';
    
            this._init(baseOptions);
        };
    
        Paganation.prototype = {
    
            constructor: Paganation,
    
            _analysisOptions: function (options) {
                for (let k in options) {
                    this[k] = options[k];
                }
            },
    
            _init: function (options) {
                this._analysisOptions(options);
    
                if (!this.baseUrl) {
                    throw new Error(`must set baseUrl`);
                }
    
                if (!this.el) {
                    throw new Error(`must set a page container`);
                };
    
                this._render();
            },
    
            // set html
            _create: function () {
                this.curPage = +this.curPage;
                this.totalPage = +this.totalPage;
                if (this.curPage < 1) this.curPage = 1;
                if (this.curPage > this.totalPage) this.curPage = this.totalPage;
                if (this.isArrow) this._createArrow();
                if (this.isTail) this._createTail();
                if (this.isShowInfo) this._createInfo();
                if (this.pageDetail) this._createPage();
            },
    
            // 上下页
            _createArrow: function () {
                const disabledClass = this.disabledClass;
                const prevUrl = this.curPage == 1 ? 'javascript:void(0);' : this.baseUrl + (this.curPage - 1);
                const nextUrl = this.curPage == this.totalPage ? 'javascript:void(0);' : this.baseUrl + (+this.curPage + 1);
                const prevDisabled = this.curPage == 1 ? disabledClass : '';
                const nextDisabled = this.curPage == this.totalPage ? disabledClass : '';
    
                this.prevHTML = '<a class="' + this.prefix + 'item ' + prevDisabled + '" href="' + prevUrl + '">上一页</a>';
                this.nextHTML = '<a class="' + this.prefix + 'item ' + nextDisabled + '" href="' + nextUrl + '">下一页</a>';
            },
    
            // 首尾页
            _createTail: function () {
                const disabledClass = this.disabledClass;
                const startUrl = this.curPage == 1 ? 'javascript:void(0);' : this.baseUrl + 1;
                const endUrl = this.curPage == this.totalPage ? 'javascript:void(0);' : this.baseUrl + this.totalPage;
                const startDisabled = this.curPage == 1 ? disabledClass : '';
                const endDisabled = this.curPage == this.totalPage ? disabledClass : '';
                this.startHTML = '<a class="' + this.prefix + 'item ' + startDisabled + '" href="' + startUrl + '">首页</a>';
                this.endHTML = '<a class="' + this.prefix + 'item ' + endDisabled + '" href="' + endUrl + '">尾页</a>';
            },
    
            // 页数详情
            _createInfo: function () {
                this.infoHTML = '<span class="' + this.prefix + 'total">共<i>' + this.totalPage + '</i>页</span><span class="' + this.prefix + 'cur">当前第<i>' + this.curPage + '</i>页</span>'
            },
    
            // 具体的页码
            _createPage: function () {
                let str = '';
                let self = this;
                let showNum = this.showNum;
                let totalPage = this.totalPage;
                let curPage = this.curPage;
                const prefix = this.prefix;
                const centerStr = '<span class="' + this.ellipsisClass + '">...</span>';
    
                let urlFn = function (i) {
                    return self.baseUrl + i;
                };
                let htmlStr = function (i) {
                    const endabled = self.curPage == i ? self.disabledClass : '';
                    return '<a class="' + prefix + 'item ' + endabled + '" href="' + urlFn(i) + '">' + i + '</a>';
                };
    
                if (showNum >= totalPage) {
                    for (let i = 1; i <= totalPage; i++) {
                        str += htmlStr(i)
                    }
                } else {
                    if (curPage < totalPage - showNum + 1) { //头部
                        for (let i = 0; i < showNum - 1; i++) {
                            str += htmlStr(+curPage + i);
                        }
                        str += centerStr + htmlStr(totalPage);
                    } else { // 尾部
                        for (let i = 1; i <= showNum; i++) {
                            str += htmlStr(totalPage - showNum + i);
                        }
                    }
                }
    
                this.pageHTML = str;
            },
    
            _goPage: function (i) {
                this.curPage = i;
                this._render();
            },
    
            _render: function () {
                this._create();
                this.el.innerHTML = this.infoHTML + this.startHTML + this.prevHTML + this.pageHTML + this.nextHTML + this.endHTML;
            }
        }
    

      

      

  • 相关阅读:
    unsupported jsonb version number 123
    如何在MPlayer上支持RTSP
    TDengine 时序数据库的 ADO.Net Core 提供程序 Maikebing.EntityFrameworkCore.Taos
    如何使用IoTSharp对接ModBus?
    如何从源码启动和编译IoTSharp
    Asp.Net Core 自动适应Windows服务、Linux服务、手动启动时的内容路径的扩展方法
    MQTTnet 的Asp.Net Core 认证事件的扩展
    Asp.Net Core 中利用QuartzHostedService 实现 Quartz 注入依赖 (DI)
    The remote certificate is invalid according to the validation procedure 远程证书验证无效
    settings插拔式源码
  • 原文地址:https://www.cnblogs.com/intangible/p/9084236.html
Copyright © 2011-2022 走看看