一、使用技术
JQuery、JavaScript
二、效果图
主体功能.png
功能1：展示总数据量
功能2：切换页面数据量查询数据
功能3：切换当前分页数量，通过点击页码翻页实现分页查询
功能4：页数搜索，根据页面进行搜索
三、页码切换实现思路
页码切换功能.png
该模块是页面中最复杂的逻辑，其实一共可以分为五个部分，左右两个部分进行页面切换，不做赘述；中间页码分为三个模块，通过当前页码和总页码来控制区域1和区域3的显示和隐藏，区域2为页面展示的页码数，展示当前页码所在区域页码的展示，具体的展示逻辑会在之后的代码中详细介绍。
注意：在此定义一个概念-----翻页，向前翻页即当前页码减5，向后翻页，当前页码加5
四、功能展示
https://6d79-mycloud-m7997-1301347483.tcb.qcloud.la/blogs/page.mp4
注意：手机端复制到手机浏览器观看，微信浏览器无法观看，电脑端复制到浏览器下载观看，无法在线观看。
五、翻页素材
ellipsis.png(用于隐藏页码)
leftPage.png(左翻页)
rightPage.png(右翻页)
注意：此图片要放在文件的相同目录的images目录下，更改代码中的路径也可。
六、功能代码
HTML代码
<!-- 分页 -->
<div class="page_container" style="display: none;">
<div class="total_count"></div>
<div class="pagination">
<!-- 左切换页面 -->
<span class="pagination_left" onclick="prePage()">《</span>
<!-- 左侧省略号 用于第一页-->
<span id="begin_page" class="begin_page">
<span class="start_end" onclick="choosePage(1)">1</span>
<!-- 省略号加切换图片 -->
<img class="left_arrow" onclick="leftPage()" src="./images/ellipsis.png"
onmouseout="this.src='./images/ellipsis.png'" onmouseover="this.src='./images/leftPage.png'"
alt="" />
</span>
<!-- 中间页数 用于展示当前页码所在的区域页码-->
<span class="page_num"></span>
<!-- 右侧省略号 用于展示最后一页-->
<span id="end_page" class="begin_page">
<!-- 省略号加切换图片 -->
<img class="left_arrow" onclick="rightPage()" src="./images/ellipsis.png"
onmouseout="this.src='./images/ellipsis.png'" onmouseover="this.src='./images/rightPage.png'"
alt="" />
<!-- 最大页码 -->
<span class="max_page start_end" onclick="chooseMaxPage()"></span>
</span>
<!-- 右切换页码 -->
<span class="pagination_left" onclick="nextPage()">》</span>
</div>
<!-- 切换页面数据量 -->
<select class="page_size" onchange="choosePagesize()">
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="30">30条/页</option>
</select>
<!-- 页面跳转 -->
<div class="skip_page">
<span>跳转到</span>
<input oninput="value=value.replace(/[^\d]/g,'')" id="inputPage" type="text" class="page-num form-control ">
</div>
</div>
<!-- 页面弹出框 -->
<div class="popup" style="display: none"></div>
JS代码
// 当前页码
var currentPage = 1
// 当前页面大小
var currentPagesize = 10
// 总页面数
var pageNum = 0
// 总数据量
var totalCount = 0
// 程序入口
getNeeds()
// 接口查询，这个地方可以添加接口对数据操作
function getNeeds() {
totalCount = 230;
pageNum = Math.ceil(totalCount / currentPagesize);
$('.total_count').text('共' + totalCount + '条');
// 调用页面渲染函数，这个函数是页面中最重要的函数
getCurrentPagesList(currentPage)
}
//输入框
$('#inputPage').keydown(function (event) {
// 获得页码输入框
var inputPageNum = parseInt($('#inputPage').val().trim())
// 当按回车键且输入框不为空时可以输入
if (event.keyCode === 13 && !isNaN(inputPageNum)) {
// 当输入的页码为0到最大页码才是合法页码
if (1 <= inputPageNum && inputPageNum <= pageNum) {
// 设置当前页码
currentPage = inputPageNum
// 重新调用接口
chooseInterface()
$('#inputPage').val('')
} else {
showPopup('请输入合法的页数')
}
}
})
// 点击最大页数
function chooseMaxPage() {
// 点击最大页码 将当前页码设置为最大编码
currentPage = pageNum
// 调用接口查询数据渲染
chooseInterface()
}
//分页查询上一页
function prePage() {
// 当当前页码为1时，到第一页了，提示第一页，不是第一页currentPage-1
if (currentPage === 1) {
showPopup('已经是第一页了')
} else {
currentPage--
chooseInterface()
}
}
//分页查询下一页
function nextPage() {
// 当当前页码为最大时，到第最后页了，提示第最后页，不是最后页currentPage+1
if (currentPage === pageNum) {
showPopup('已经是最后一页了')
} else {
currentPage++
chooseInterface()
}
}
//选择页面
function choosePage(page) {
// 点击页面页码
currentPage = page
chooseInterface()
}
//选择页面大小
function choosePagesize() {
//输入框的选项
currentPagesize = $('.page_size').val()
// 设置页面大小的时候重新设置页码为1，防止页面数量变大，页码数超出范围报错
currentPage = 1
chooseInterface()
}
// 判断调用查询全部接口还是按照种类查询接口
function chooseInterface() {
//查询数据
getNeeds()
}
// 左翻页
function leftPage() {
// 页码左翻页 当前页码比5小的时候，设置当前页码为1，否则currentPage-5
currentPage = currentPage - 5 <= 0 ? 1 : currentPage - 5
chooseInterface()
}
// 右翻页
function rightPage() {
// 页码左右翻页 当前页码比5大的时候，设置当前页码为最大页码pageNum，否则currentPage+5
currentPage = currentPage + 5 >= pageNum ? pageNum : currentPage + 5
chooseInterface()
}
// 获得当前页码数组
function getCurrentPagesList(currentPage) {
// 当前展示的页码
var pageList = []
// 页码字符串
var pageStr = ''
// 当前页码小于4的时候
if (currentPage <= 4) {
// 当总页码大于5
if (pageNum > 5) {
// 左侧翻页隐藏
$('#begin_page').css('display', 'none')
// 页码数为1 2 3 4 5
pageList = [1, 2, 3, 4, 5]
// 右侧翻页正常显示
$('#end_page').css('display', 'block')
// 最大页码即为最大页码
$('.max_page').html(pageNum)
// 当总页码小于5时
} else {
// 左侧和右侧翻页都隐藏
$('#begin_page').css('display', 'none')
$('#end_page').css('display', 'none')
// 展示所有页码
for (var j = 1; j <= pageNum; j++) {
pageList.push(j)
}
}
// 当前页码比总页码数小四的情况下，进行翻页时，可以进行下一页
} else if (currentPage + 4 <= pageNum) {
// 左侧翻页显示
$('#begin_page').css('display', 'block')
// 当前页码
pageList = [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2]
// 右侧翻页显示
$('#end_page').css('display', 'block')
// 当前页码比最大页码大于4个时候
} else {
pageList = [pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]
// 总页码数小于5
if (pageNum <= 5) {
// 隐藏左侧和右侧翻页
$('#begin_page').css('display', 'none')
$('#end_page').css('display', 'none')
} else {
// 隐藏右侧翻页 展示左侧翻页
$('#begin_page').css('display', 'block')
$('#end_page').css('display', 'none')
}
}
// 将原来页码的清空
$('.page_num span').remove()
// 根据页码数组进行渲染
for (var index = 0; index < pageList.length; index++) {
if (currentPage == pageList[index]) {
pageStr += '<span class="active_page" onclick="choosePage(' + (pageList[index]) + ')">' + pageList[index] + '</span>'
} else {
pageStr += '<span onclick="choosePage(' + (pageList[index]) + ')">' + pageList[index] + '</span>'
}
}
$('.page_num').append(pageStr)
$('.page_container').css('display', 'flex')
}
// 弹出层
function showPopup(message) {
$('.popup').css('display', 'block')
$('.popup').text(message)
var timer = setTimeout(function () {
$('.popup').css('display', 'none')
clearTimeout(timer)
}, 2000)
}
CSS代码
.page_container {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.page_container span {
display: inline-block;
height: 30px;
line-height: 30px;
}
.total_count {
margin-left: 50px
}
.pagination {
margin-left: 20px;
margin-right: 20px;
display: flex;
align-items: center;
}
.skip_page {
margin-left: 20px;
display: flex;
align-items: center;
}
.skip_page span {
display: inline-block;
width: 60px;
}
.skip_page input {
width: 80px;
}
.page_num span {
display: inline-block;
width: 30px;
cursor: pointer;
text-align: center;
}
.active_page {
color: rgb(16, 166, 137);
}
.pagination_left {
cursor: pointer;
}
.pagination_right {
cursor: pointer;
}
.begin_page {
display: flex;
align-items: center;
}
.page_size {
outline: none;
border: solid 1px #ccc;
}
/* 左侧箭头 */
.left_arrow {
height: 25px;
width: 25px;
margin-bottom: 3px;
}
.start_end {
display: inline-block;
width: 30px;
text-align: center;
cursor: pointer;
}
/*弹出框*/
.popup {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 5px;
padding: 10px;
color: white;
}
