AmazeUi(妹纸)分页插件应用

2018-03-13 903 阅读1分钟

#今天和大家分享下AmazeUI 里边自带分页插件的用法

##步骤一：dom结构+引入相关文件

  <link rel="stylesheet" href="assets/css/amazeui.page.css">
  
      <input type="hidden" name="" id="PagerHid" value="1"> <!--以上隐藏域可以不加，我为的跳转页码带值-->
      <div id="Page" style="margin:0 auto;display:table;"></div>
      
  <script src="assets/js/amazeui.page.js"></script>

##步骤二：js书写

            $("#Page").html("");//要把之前的分页数据清空
            //初始化分页插件
            $("#Page").page({
                pages: pageInfo.totalPages,//总页码数(后台返回字段可以给出)
                first: "首页", //设置false则不显示，默认为false
                last: "尾页", //设置false则不显示，默认为false
                prev: '<', //若不显示，设置false即可，默认为上一页
                next: '>', //若不显示，设置false即可，默认为下一页
                groups: 4, //连续显示分页数
                curr: pageInfo.pageNum, //当前页(后台返回当前页码数)
                jump: function(context, first) {
                    var pageNum = String(context.option.curr);//分页点击回传的页码数
                    // console.log('当前第：' + context.option.curr + "页" +",first="+first);
                   //do something(AJAX请求下一页的函数)
            }});

##展示效果

##参考文章

官方分页API