ZUI分页器网址

JS插件 > 分页器 - ZUI - 开源HTML5跨屏框架 (openzui.com)

分页器是一个使用 JavaScript 增强的分页组件，不同于传统的 组件->分页条，分页器只需要给定一些参数即可创建丰富外观的分页指示组件。

步骤

  1. 为一个空的 <ul class="pager"> 元素添加 [data-ride="pager"] 属性来启用分页器，通过 data-page、data-rec-total、data-rec-per-page 来分别指定初始状态时当前页数、总记录数和每页记录数。

data-page：当前第几页

data-rec-per-page：每页有几条

data-rec-total：总的记录数

<div>
     <ul class="pager" data-ride="pager" data-page="1" data-rec-per-page="6" data-rec-total="16"></ul>
</div>

效果如下：

  1. 引入css和js

 <link rel="stylesheet" href="../css/zui.min.css">
<script src="../js/zui.min.js"></script>

效果如下：

会发现提示是英文。此时在html顶部，将

<html lang="en">

改为：

<html lang="zh-cn">

效果图如下：

  1. 将分页器和ajax进行绑定

3.1将ul改为：添加id属性是为了好控制ul。删除其余的是为了实现动态转换

<ul id="myPager" class="pager" data-ride="pager"></ul>

3.2将以下代码添加到获取数据之后，为了实现数据的动态转换

 //将ajax返回的页码数据与分页器插件绑定
        //获取分页器实例对象
        var myPager = $('#myPager').data('zui.pager');
        myPager.set({
            page: page,    //页码数，第几页
            recTotal: totalnum,     //总记录数
            recPerPage: pagesize    //每页返回记录数  
        });

3.3通过jquery事件绑定监听页码变更

将当前的页码变成点击之后的页码，重新发送ajax请求即可。

$('#myPager').on('onPageChange', function (e, state, oldState) {
            if (state.page !== oldState.page) {
                console.log('页码从', oldState.page, '变更为', state.page);
                data.page = state.page
                //重新根据data请求新的数据
                courselist(data)
            }
});

# jquery # javascript # ajax
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区

提升Angular2-HN性能的7个实用技巧：让新闻加载速度飞起来

Angular2-HN是一款基于Angular构建的Progressive Hacker News客户端，专为追求高效新闻浏览体验的用户设计。本文将分享7个实用技巧，帮助你优化Angular2-HN的性能，让新闻加载速度显著提升，带来更流畅的阅读体验。## 1. 启用Service Worker缓存关键资源Service Worker是提升Angular应用性能的强大工具，它可以在后台缓存

avatar 魔乐社区