jquery pagination 分页插件

官网: https://pagination.js.org/

github: https://github.com/superRaytin/paginationjs

适合简单的分页需求，配置较为基础。

1、引入 jQuery 和 Pagination 插件

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”path/to/jquery.pagination.min.js”></script>
<link rel=”stylesheet” href=”path/to/jquery.pagination.css”>

2、HTML结构

<div class="page"></div>

3、js代码：

$('.page').pagination({   

    pageCount: 10, //总页数   

    current: 1, //当前第几页  

    jump: true, //是否开启跳转到指定页数   

    coping: true, //是否开启首页和尾页 

    homePage: '首页',//首页节点内容   

    endPage: '尾页',//尾页节点内容   

    prevContent: '上一页',   

    nextContent: '下一页',

    callback:function(api){   

        console.log(api.getCurrent())//获取当前页码 

    } 

})

参数说明

pageCount: 总页数。
current: 当前页码。
coping: 是否显示…。
homePage: 定义“首页”按钮的文本。
endPage:定义“尾页”按钮的文本。
prevContent: 定义“上一页”按钮的文本
nextContent:定义“下一页”按钮的文本。

效果展示

$(‘.page‘).pagination({pageCount: 5,});

$(‘.page‘).pagination({pageCount:500})

> 代表下一下，每次只会移动一页

$(‘.page‘).pagination({pageCount:500,coping: true})

$(‘.page‘).pagination({pageCount:500, coping: true, homePage: ‘首页’, endPage: ‘尾页’})

$(‘.page‘).pagination({pageCount: 500,coping: true,homePage: ‘首页’,endPage: ‘尾页’,prevContent: ‘上一页’,nextContent: ‘下一页’});