如何使用amaze ui的分页样式封装一个通用的JS分页控件

网页制作 2024/12/28 佚名

3 2 1

　　首先，肯定是用我们的妹子UI做样式效果，毕竟开发妹子少，做的东西能和妹子沾点边，就沾一点，毕竟妹子比较好看。

　　第一步

　　　　找到妹子UI的分页HTML代码，一共有2种，我喜欢第一种，比较有颜

　　　　这是妹子UI的分页代码

<ul data-am-widget="pagination"
      class="am-pagination am-pagination-default"
      >

      <li class="am-pagination-first ">
        <a href="#" class="">第一页</a>
      </li>

      <li class="am-pagination-prev ">
        <a href="#" class="">上一页</a>
      </li>
            <li class="">
              <a href="#" class="">1</a>
            </li>
            <li class="am-active">
              <a href="#" class="am-active">2</a>
            </li>
            <li class="">
              <a href="#" class="">3</a>
            </li>
            <li class="">
              <a href="#" class="">4</a>
            </li>
            <li class="">
              <a href="#" class="">5</a>
            </li>


      <li class="am-pagination-next ">
        <a href="#" class="">下一页</a>
      </li>

      <li class="am-pagination-last ">
        <a href="#" class="">最末页</a>
      </li>
  </ul>

　　　　代码简单，外观漂亮，自然是封装的首选啦。

　　　　接下来，就是造轮子的时间了，首先讲讲思路：我们需要一个动态的分页，那么这个里面的 li 就必须是动态生成的，所以需要用js去生成dom元素，其次，使用者需要一个回调函数，用来分页之后去请求他的数据，加载数据，这是核心的2个思路，剩下的就是分页常规的一些东西，比如分页必须的参数：当前页、每页条数、总条数，以及这个样式对应的一些事件的处理：首页、尾页、上一页、下一页。

　　　　思路整理完毕，开整。

　　　　1、初始化

　　　　　　init初始化函数，里面将使用者传入进来的参数赋值，并计算下总页数，总页数说明下，我是以0为第一页，所以总页数为总条数/每页条数使用Math.ceil 向上取整 -1 即为总页数。

function fm_page(cnf) {
    var fmpage = {
        id:'page',
        pageNo : 0,// 当前页
        pageSize : 10,// 每页条数
        pageCount : 100,// 总条数
        showPageNum : 5,// 分页元素长度
        pageNum:0,// 总页数
        pageCmp:null,
        start:0,
        init : function() {
             var it = this;
             if (cnf) {
                 $.each(cnf, function(k, v) {
                     it[k]=v;
                 });
             }
            this.pageNum=Math.ceil(this.pageCount/this.pageSize)-1;
        }
    }
    fmpage.init();
    return fmpage;
}

　　　　2、js动态加载li

　　　　　　根据使用者想显示的数量动态加载li,start 为li的起始数字

renderPage:function(start) {
             this.start = start || 0;
             this.pageCmp=$("#"+this.id);
             this.pageCmp.empty();
             this.pageCmp.append('<li ><a onclick="{0}" class="">第一页</a></li>'.replace('{0}',this.id+'.toFirst()'));
             this.pageCmp.append('<li ><a onclick="{0}" class="">上一页</a></li>'.replace('{0}',this.id+'.toPrev()'));
             var endNum=this.pageCount/this.pageSize>(this.showPageNum+this.start)?(this.showPageNum+this.start):this.pageCount/this.pageSize;// 截止元素
            
             for(var i=this.start;i<endNum;i++)
                 {
                    var chose = i == this.pageNo? this.choseClass : '';
                     var li='<li class={1} ><a  onclick="{2}" class="">{0}</a></li>';
                     this.pageCmp.append(li.replace('{0}',i+1).replace('{1}',chose).replace('{2}',this.id+'.toPage({0})'.replace('{0}',i)) );
                 }
             
             this.pageCmp.append('<li ><a onclick="{0}"  class="">下一页</a></li>'.replace('{0}',this.id+'.toNext()'));
             this.pageCmp.append('<li ><a onclick="{0}" class="">最末页</a></li>'.replace('{0}',this.id+'.toLast()'));
        }

　　　　3、首页、尾页、下一页、上一页、跳转等函数

toNext:function(){
            this.pageNo = this.pageNo==this.pageNum?this.pageNo:this.pageNo+1;
            if(this.pageNo>=this.start+this.showPageNum&&this.pageNo<(this.pageNum)){
                this.start=this.start+this.showPageNum;
                this.renderPage(this.start);
            }
                
            if(this.pageNo<=(this.pageNum))
                this.liCls();
        },
        toPrev:function(){
            this.pageNo = this.pageNo==0?0:this.pageNo-1;
            if(this.pageNo<(this.start)){
                this.start=this.start-this.showPageNum;
                this.renderPage(this.start);
            }
            if(this.pageNo>=0)
                this.liCls();
        },
        toFirst:function(){
            this.pageNo=0;
            if(this.pageNo<(this.start)){
                this.start=0;
                this.renderPage(this.start);
            }
            this.liCls();
        },
        toLast:function(){
            this.pageNo=this.pageNum;
            if(this.pageNo>=this.start+this.showPageNum){
                this.start=this.pageNum-this.showPageNum+1;
                this.renderPage(this.start);
            }
            this.liCls();
        },
        toPage:function(pageNo){
            this.pageNo=pageNo;
            this.liCls();
        },

　　　　4、跳转后要将某页选中，并调用回调函数

liCls : function() {
            this.pageChange(this.pageNo);
            this.pageCmp.find('li:eq(' + (this.pageNo - this.start + 2) + ')')
                        .siblings('li').removeClass(this.choseClass).end()
                        .addClass(this.choseClass);
        },
        pageChange:function(pageNo){
            
        }

　　　　5、经过测试，调整、优化，没有发现问题，编写注释，这个分页控件

　　　　　使用注意：调用必须实例化，且接收参数名与ul的id一致

　　　　　优点：a、本身使用妹子ui，漂亮、代码简洁

　　　　　　　　b、经封装后，调用简单，无暗病

　　　　　　　　c、还支持自定义样式，只需要你在ul上绑定你自己想要的class，并配置选择效果class即可

　　最后，附上完整的控件代码，百度网盘下载地址：

链接：https://pan.baidu.com/s/1R6H6D7apOa6Aatn6kmABuw

提取码: gv7b

总结

amaze,ui分页样式封装JS分页控件,amaze,ui分页样式

标签：

amaze,ui分页样式封装JS分页控件,amaze,ui分页样式

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“如何使用amaze ui的分页样式封装一个通用的JS分页控件”

如何使用amaze ui的分页样式封装一个通用的JS分页控件

暂无“如何使用amaze ui的分页样式封装一个通用的JS分页控件”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

如何使用amaze ui的分页样式封装一个通用的JS分页控件

amaze,ui分页样式封装JS分页控件,amaze,ui分页样式

amazeui树节点自动展开折叠面板并选中第一个树节点的实现

Canvas波浪花环的示例代码

评论“如何使用amaze ui的分页样式封装一个通用的JS分页控件”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

如何使用amaze ui的分页样式封装一个通用的JS分页控件

amaze,ui分页样式封装JS分页控件,amaze,ui分页样式

amazeui树节点自动展开折叠面板并选中第一个树节点的实现

Canvas波浪花环的示例代码

评论“如何使用amaze ui的分页样式封装一个通用的JS分页控件”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存