1.全部源码，复制到html上就能看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq实现分页功能</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding:0}
#paging{
width:100%;
height:auto;
margin-top:100px;
}
/* 内容样式 */
#paging .paging-content{
width:100%;
height:auto;
text-align: center;
}
#paging .paging-content .paging-content-text{
width:100%;
height:50px;
line-height:50px;
}
/*分页样式*/
#paging .paging-footer{
width:100%;
height:50px;
line-height:50px;
font-size:20px;
color:#fff;
background-color:#d3d3d3;
}
#paging .paging-footer .paging-footer-content{
text-align:center;
margin:auto;
}
#paging .paging-footer-content .content-text{
display:inline-block;
margin-right:15px;
}
#paging .paging-footer-content .content-text button{
color:#fff;
font-size:20px;
background-color: #d3d3d3;
outline: none;
border:none;
cursor:pointer;
}
#paging .paging-footer-content .content-text .upward{
cursor:no-drop;
}
#paging .paging-footer-content .content-text span{
color:#d3d3d3;
font-size:16px;
background-color:#fff;
border-radius:8px;
padding:1px 15px;
margin:0 10px;
}
#paging .paging-footer-content .content-text input{
width:30px;
font-size:16px;
background-color:#fff;
border-radius:8px;
padding:1px 15px;
margin:0 10px;
outline: none;
border:none;
}
</style>
</head>
<body>
<div id="paging">
<div class="paging-content">
</div>
<div class="paging-footer">
<div class="paging-footer-content">
<div class="content-text">
<button class="upward" disabled="disabled">上一页</button>
</div>
<div class="content-text">
第<span class="nowPage">1</span>页
</div>
<div class="content-text">
<button class="down">下一页</button>
</div>
<div class="content-text">
跳转<input class="pageVal" type="text" value="1" onKeyUp="value=value.replace(/\D/g,'')"/>页
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//页面加载初始化数据
var page = 1; //请求页数
var pageSize = 10; //每页返回数据条数
getData();
function getData(){
$.ajax({
url: 'https://easy-mock.com/mock/5c10e14fbe3cc90fa1b1706a/boke/api/ceshi',
type: 'GET',
data: {
'page': page,
'pageSize': pageSize
},
dataType: "json",
success: function(res){
var pageData = res.data;
//每次请求清空原来的数据
$('#paging .paging-content').html('');
$.each(pageData,function(index,res){
pagingContent =
'<div class="paging-content-text">'+res.userid+'</div>'
//将请求的数据append到页面上
$('#paging .paging-content').append(pagingContent);
})
}
});
}
//分页
var upwardPage = $(' #paging .content-text .upward'); //上一页
var downPage = $(' #paging .content-text .down'); //下一页
var nowPage = $(' #paging .content-text .nowPage'); //当前页数
var nowPageNum = Number(nowPage.html()); //当前页数转换成数字类型
var pageVal = $(' #paging .content-text .pageVal'); //跳转页数
//上一页
upwardPage.click(function(){
nowPageNum = page;
//点击上一页，如果当前页数>1 页数--，当前页数<1，将页数赋值第一页1，并禁用点击上一页
if(nowPageNum > 1){
nowPageNum --;
}else{
nowPageNum == 1;
}
if(nowPageNum == 1){
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
pageVal.val(1);
page = nowPageNum;
getData();
}
else{
nowPage.html(nowPageNum);
pageVal.val(nowPageNum);
page = nowPageNum;
getData();
}
})
//下一页
downPage.click(function(){
//页数++ 并解除上一页的禁用
nowPageNum = page;
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPageNum++;
nowPage.html(nowPageNum);
pageVal.val(nowPageNum);
page = nowPageNum;
getData();
})
//跳转
//失去焦点
pageVal.blur(function(){
var pageval = Number(pageVal.val());
var nowpage = Number(nowPage.html());
//如果失去焦点前后的值一样，不进行数据请求
if(pageval != nowpage){
//小于1跳转第一页
if(pageval > 1){
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPage.html(pageval);
page = pageval;
getData();
}else{
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
page = 1;
getData();
}
}
})
//回车
pageVal.keyup(function(event){
if(event.keyCode == 13){
var pageval = Number(pageVal.val());
var nowpage = Number(nowPage.html());
//如果失去焦点前后的值一样，不进行数据请求
if(pageval != nowpage){
//小于1跳转第一页
if(pageval > 1){
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPage.html(pageval);
page = pageval;
getData();
}else{
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
page = 1;
getData();
}
}
}
})
})
</script>
</body>
</html>
2.效果图
