AmazeUi(妹纸)分页插件应用

最新推荐文章于 2025-05-20 15:01:15 发布

转载最新推荐文章于 2025-05-20 15:01:15 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5aa73501f265da23826da388

文章标签：

#ui #php

本文介绍如何在AmazeUI中使用内置的分页插件。通过简单的DOM结构搭建及引入必要文件，结合JavaScript配置，实现自定义分页效果。包括设置首页、尾页、前后页按钮及连续显示的页码数量等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#今天和大家分享下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请求下一页的函数)
            }});
复制代码