怎样应用amaze ui的分页查询款式封裝●▂●一个通

日期：2021-01-20 类型：科技新闻我要分享

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

　　最先，毫无疑问是用大家的妹纸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原素，次之，应用者必须一个回调函数涵数，用于分页查询以后去恳求他的数据信息，载入数据信息，它是关键的两个构思，剩余的便是分页查询基本的一些物品，例如分页查询务必的主要参数：当今页、每张总数、总总数，及其这一款式相匹配的一些恶性事件的解决：主页、尾页、上一页、下一页。

　　　　构思梳理结束，开整。

　　　　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分页查询款式封裝JS分页查询控制內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：详细说明怎样应用CSS挑选全部子原■素返回下一篇：没有了