index.html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页学习</title>
<style>
#list{
list-style: none;
display: flex;
flex-direction: row;
text-align: center;
width: 60%;
margin: 0 auto;
justify-content: center;
padding: 0;
}
li{
width:auto;
line-height: 24px;
border: 1px solid #ccc;
margin: 0 5px;
cursor: pointer;
user-select: none;
}
.list-page{
width: 30px;
}
.roll{
padding: 0 10px;
}
table{
width: 60%;
text-align: center;
margin: 50px auto;
}
thead{
background-color: #555;
color: #fff;
}
tbody tr:nth-child(2n+1) td{
background-color: #fff;
color:#555;
}
tbody tr:nth-child(2n) td{
background-color: #a6a6a6;
color: #555;
}
h3{
text-align: center;
}
input{
height: 100%;
width: 80px;
box-sizing: border-box;
text-align: center;
}
#go{
display: inline-block;
background-color: #555;
color: #fff;
padding: 0 15px;
line-height: 26px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>分页数据展示</h3>
<table>
<thead>
<tr>
<td>id</td>
<td>cateid</td>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<ul id="list">
<li class="roll">上一页</li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="list-page"></li>
<li class="roll">下一页</li>
<div style="border: none">
<input type="text" value="" id="goInput">
<span id="go">Go</span>
</div>
</ul>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./index.js"></script>
<script>
getData();
$('#go').click(function () {
let value=$('#goInput').val();
setCurrentPage(value);
getData();
});
$('#goInput').keydown(function (event) {
if(event.keyCode === 13){
let value=$('#goInput').val();
setCurrentPage(value);
getData();
}
});
</script>
</body>
</html>
index.js代码
var total=0;
var currentPage=1;
var isInit =false;
var pageSize=3;
function init(page,num) {
if(!isInit){
isInit=true;
currentPage=page;
total=num;
changePage(currentPage);
}
}
function setCurrentPage(page) {
if(page >total || page < 1){
return false;
}
currentPage=parseInt(page);
return true;
}
function changePage(page) {
let pageArr=[];
if(page >total || page<1){
return false;
}
page=parseInt(page);
$('#goInput').val(currentPage);
if(page > total - 5 ){
pageArr=[1,'...',total-6,total-5,total-4,total-3,total-2,total-1,total];
light=8-(total - page);
}else if(page<6){
pageArr=[1,2,3,4,5,6,7,'...',total];
light=page - 1;
}else {
pageArr=[1,'...',page-2,page-1,page,page+1,page+2,'',total];
light=4;
}
renderPage(pageArr,light);
return true;
}
function renderPage(pageArr,light) {
for(let i=0;i<pageArr.length;i++){
$('.list-page').eq(i).text(pageArr[i]);
if(pageArr[i]==='...'){
$('.list-page').eq(i).css('border','none');
}else if(i === 1 || i ===pageArr.length -2){
$('.list-page').eq(i).css('border','1px solid #ccc');
}
}
$('.list-page').css('borderColor','#ccc').css('color','#000').css('background-color','#fff');
$('.list-page').eq(light).css('color','#fff').css('background-color','#555');
}
$('#list').on('click','li',function () {
switch ($(this).text()){
case '...':{
break;
}
case '上一页':{
setCurrentPage(currentPage-1) && getData();
break;
}
case '下一页':{
setCurrentPage(currentPage+1) && getData();
getData();
break;
}
default:{
setCurrentPage($(this).text()) && getData();
getData();
break;
}
}
});
function getData() {
$.ajax('http://localhost/fenye/index.php',{
type:'GET',
data:{
page_size:pageSize,
page_index:currentPage
} ,
dataType:'json'
}).done(function (data) {
if(data.code === 0){
let totalPage = data.info.total_page;
console.log(data.info);
init(currentPage,totalPage);
changePage(currentPage);
$('#data').html('');
data.info.data.forEach(element =>{
let el=`<tr>
<td>${element.id}</td>
<td>${element.cateid}</td>
</tr>`;
$('#data').append(el);
});
}else {
console.log("稍后重试");
}
}).fail(function (xhr,status) {
console.log("稍后重试");
});
}
还不快抢沙发