代码拉取完成,页面将自动刷新
基于 jQuery 的简单 JavaScript 分页组件
jQuery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
Pagination
<script src="./pagination/pagination.js"></script>
class
或id
,实现多个分页 <div class="row ">
<div class="page-container"></div>
</div>
const pageSize = 10 // 默认页码大小
const dataCount = 95 // 测试数据数量
const pager = new Pagination('.page-container', {
pageSize: pageSize,
autoLoad: true,
unit: '条',
toPage: function(index, _pageSize) {
// 设置记录总数,用于生成分页HTML内容
if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)
// 根据页码以及分页大小生成html内容
let pageListHtml = ''
for (var i = 0; i < (_pageSize || pageSize); i++) {
pageListHtml += `
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card - ${index *
(_pageSize || pageSize) +
i +
1}</h5>
<p class="card-text">card-text,card-text,card-text,card-text</p>
</div>
</div>
</div>
`
}
$('.page-list').html(pageListHtml)
}
})
chrome firefox safari edge ie9以上
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。