版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！
恰饭广告
参考资料：
http://www.jq22.com/jquery-info5697
修复：分页出现0的问题，页数取到string类型转为int
注意：必须引入css和js文件
<!DOCTYPE html>
<html lang="cn-ZH">
<head>
<meta charset="UTF-8">
<title>pagination.js - 分页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.idaobin.com/css/pagination.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="eg">
<div class="m-style M-box4"></div>
</div>
</div>
</div>
</div>
<script src="https://www.idaobin.com/js/jquery-3.2.1.js"></script>
<script src="https://www.idaobin.com/js/jquery.pagination.js"></script>
<script>
function tablePagetion(url,page) {
$.ajax({
type : 'post',
url : url, //请求地址
data : {
page : page
},
dataType : 'json', //返回类型
success : function(data) { //请求成功
console.log(data);
},
error : function(XMLHttpRequest, textStatus) { //请求失败
if (textStatus == 'timeout') {
var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xmlhttp.abort();
alert("请求超时");
} else if (textStatus == "error") {
alert("服务器内部错误");
} else if (textStatus == "parsererror") {
alert("返回类型错误");
}
}
});
}
function pagination(pageCount, url) {
$('.M-box4').pagination({
mode : 'fixed',
pageCount : pageCount,
coping : true,
homePage : '首页',
endPage : '末页',
prevContent : '上页',
nextContent : '下页',
jump : true,
callback : function(api) {
tablePagetion(url,api.getCurrent());
}
});
}
$(document).ready(function() {
//页面加载设置返回总页数
$.ajax({
type : 'post',
url : 'pagetion', //请求地址
data : {
page : 1
},
dataType : 'json', //返回类型
success : function(data) { //请求成功
console.log(data);
pagination(data.pageCount, "pagetion");
},
error : function(XMLHttpRequest, textStatus) { //请求失败
if (textStatus == 'timeout') {
var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xmlhttp.abort();
alert("请求超时");
} else if (textStatus == "error") {
alert("服务器内部错误");
} else if (textStatus == "parsererror") {
alert("返回类型错误");
}
}
});
});
</script>
</body>
</html>
原文链接：https://www.idaobin.com/archives/1962.html
让我恰个饭吧.ヘ(￣ω￣ヘ)
支付宝 ——————- 微信
恰饭广告
