摘自:http://www.zhaochao.top/article/69,更多开发技术请访问 https://www.zhaochao.top
简单的分页插件
首先上效果:
代码:
/**
* 分页工具类
* @author zhaochao
* @param pageId 分页div的id
* @param currentPage 当前页
* @param sumPage 总页数
* @param sumCount 总数据条数
* @param fn 点击分页时要执行的方法,方法的第一个参数要是page
*/
function pageTool(pageId, currentPage, sumPage, sumCount, fn) {
currentPage = currentPage == undefined || currentPage == null ? 1 : currentPage;
sumPage = sumPage == undefined || sumPage == null ? 1 : sumPage;
sumCount = sumCount == undefined || sumCount == null ? 0 : sumCount;
var pageContent =
'<div style="float: right; font-size: 12px;margin-top: 10px;color: #999999">' +
'<span>总计<span style="color: #ED6408;">' + sumCount +
'</span>个记录/共<span style="color: #ED6408;">' + sumPage +
'</span>页,第<span style="color: #ED6408;">' + currentPage + '</span>页</span> ';
if (currentPage > 1) {
pageContent +=
'<a href="javascript:;" id="page_1" ' +
'style="float: none;text-decoration: none;color: #555;width: 37px;height: 15px;">首页</a> '+
'<a href="javascript:;" id="page_' + (currentPage > 1 ? currentPage - 1 : 1) + ' +
'" style="text-decoration: none;color: #555;">上一页</a> ';
}
if (currentPage < sumPage) {
pageContent +=
'<a href="javascript:;" id="page_' +
'(currentPage < sumPage ? parseInt(currentPage) + 1 : sumPage)' +
'" style="text-decoration: none;color: #555;">下一页</a> ' +
'<a href="javascript:;" id="page_' + sumPage +
'" style="text-decoration: none;color: #555;">尾页</a> ';
}
pageContent +=
'| ' +
'<span>第<input id="page_input" type="number" min="1" max="' + sumPage + ' +
'" style="width:40px;" value="' + currentPage + ' +
'"/>页<button style="width:45px;text-align: center;display: inline-block;' +
'border: #dedfde 1px solid;background-color: #ffffff;" id="page_btn">跳转</button></span>' +
'</div>';
$('#' + pageId).html(pageContent);
//绑定A鼠标移上事件
$('#' + pageId + ' div a').hover(function () {
$(this).attr('style', 'color: #50c08f;font-weight: bold;text-decoration: none;');
}, function () {
$(this).attr('style', 'color: #555;font-weight: normal;text-decoration: none;');
});
//绑定A点击事件
$('#' + pageId + ' div a').click(function () {
var pageNum = $(this).attr('id').split('_')[1];
if (pageNum != currentPage) {
fn(pageNum);
}
});
//绑定跳转按钮事件
$('#page_btn').hover(function () {
$(this).attr('style', 'width:45px;border: #dedfde 1px solid;background-color: #50c08f;');
}, function () {
$(this).attr('style', 'width:45px;border: #dedfde 1px solid;background-color: #ffffff;');
});
$('#page_btn').click(function () {
var pageNum = $('#page_input').val().trim();
pageNum = pageNum > sumPage ? sumPage : pageNum <= 0 ? 1 : pageNum;
if (pageNum != currentPage) {
fn(pageNum);
}
});
}
更多资源请访问 http://www.zhaochao.top