html页面结构
<div class="pagingInfo">
<span class="page pre">上一页</span>
<span class="num"><em class="curPage">1</em>/<em class="totalPage">5</em></span>
<span class="page next">下一页</span>
</div>
jQuery前端分页
(function ($) {
$.myPaging = {
pageNum: 8,
loadMsgIcons: function () {
var $iconsRewardDom = $('.live-msg-icon');
var dataMsgIconsList = $.general.getChaticoList();
var dataLength = dataMsgIconsList.length;
var totalPage = (dataLength % 8) == 0 ? (dataLength / 8) : parseInt((dataLength / 8)) + 1;
$iconsRewardDom.find('.pagingInfo .num .totalPage').text(totalPage);
var curPage = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
var pageList = $.myPaging.getDataList(dataMsgIconsList, curPage);
$iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));
$iconsRewardDom.find('.pagingInfo .pre').click(function () {
var curPageNum = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
if ((curPageNum - 1) != 0) {
var curPageNow = curPageNum - 1;
var pageList = $.myPaging.getDataList(dataMsgIconsList, curPageNow);
$iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));
$iconsRewardDom.find('.pagingInfo .num .curPage').text(curPageNum - 1);
}
});
$iconsRewardDom.find('.pagingInfo .next').click(function () {
var curPageNum = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
if ((curPageNum + 1) <= totalPage) {
var curPageNow = curPageNum + 1;
var pageList = $.myPaging.getDataList(dataMsgIconsList, curPageNow);
$iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));
$iconsRewardDom.find('.pagingInfo .num .curPage').text(curPageNum + 1);
}
});
},
getDataList: function (dataObj, curPage) {
var pageNum = $.myPaging.pageNum;
var pagingDataList = [];
var start = (curPage - 1) * pageNum;
var end = start + pageNum;
return dataObj.slice(start, end);
},
}
$.myPaging.init();
})(jQuery);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)