分页插件(jquery.pagination.js)简单案例

最新推荐文章于 2025-11-14 17:40:38 发布

原创

最新推荐文章于 2025-11-14 17:40:38 发布 · 985 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何使用分页插件jquery.pagination.js来实现数据分页显示。通过简单的html、js和css代码示例，展示了如何进行分页设置，并提示了详细文档的查看位置。

分页插件(jquery.pagination.js)

前言：开发中需要展示数据操作记录，但数量是未知的，使用该插件，实现分页切换页码的功能；

1 . 使用：

//引入文件（先引入jQuery，再引入pagination组件）
<script src="jquery.js"></script>
<script src="jquery.pagination.js"></script>

2 . 具体效果：

在这里插入图片描述

3 . html代码：

<div class="bg-white">
	//具体容器
    <div class="ux-modal_dialog">          
    </div>
</div>

4 . js代码（记录数据的请求与渲染，具体分页功能有标注，可跳过直接查看）：

<script>
    $(function(){
   
   
        getjointRecord();
        function getjointRecord(page){
   
   
            var cid = $("#cid").val();
            var realname = $("#realname").val();
            var mobile = $("#mobile").val();
            var listHtml = '';
            var pageSize = 10;
            var emptyhtml = '<div class="empty-data"><img src="/images/sus-empty.svg" alt="" class=""><p>暂无数据</p></div>';
            $.ajax({
   
   
                url: "/xxx/xxx/xxx",
                type: