分享这篇博文完全是因为懒得用插件…实现一些小功能,代码简单,记录一下
<span class="btn">
<span id="first_page">首页</span>
<span id="prev_page">上一页</span>
<span>
<span id="current_page">1</span>
<span>/</span>
<span id="total_page"></span>
</span>
<span id="next_page">下一页</span>
<span id="trail_page">尾页</span>
</span>
$(document).ready(function () {
// 数据总量
var count = 23;
// 每页显示数量
var pageCount = 5;
// 向上取整计算页数
var record = Math.round(count / pageCount);
// 总页数
$("#total_page").text(record);
let dom = $("#current_page");
// 首页
$("#first_page").click(function () {
let nowPage = dom.text(); // 每次点击获取最新页码
if (nowPage != 1) dom.text(1);
else return false;
})
// 下一页
$("#next_page").click(function () {
let nowPage = dom.text(); // 每次点击获取最新页码
if (nowPage < record) dom.text(++nowPage);
else return false;
})
// 上一页
$("#prev_page").click(function () {
let nowPage = dom.text();
if (nowPage > 1) dom.text(--nowPage);
else return false;
})
// 尾页
$("#trail_page").click(function () {
let nowPage = dom.text(); // 每次点击获取最新页码
if (nowPage != record) dom.text(record);
else return false;
})
})
最后效果,无css。