在你的.html文件中引入相关的文件:
注意:jquery.min.js需在你引入jquery.page.js之前引入。
<link rel="stylesheet" type="text/css" href="src/jquery.page.css">
<script src="src/jquery.min.js"></script>
<script src="src/jquery.page.js"></script>
文件引入之后,既可以使用了,在body中写入,相关html的代码:
<div>
<span id="page"></span>
<span> 显示 <input type="text" οnkeyup="enterEvent($event)"/> 条/页</span>
</div>
接下来就开始写我们的js代码啦! JS相关代码:
var totalPages;//总页数
function enterEvent(e) {
var keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
temp(1,false);
}
}
function tempPage(totalPages){
$("#page").Page({
totalPages:totalPages,//分页总数
liNums: totalPages < 7 ? totalPages : 7,//分页的数字按钮数(建议取奇数)
activeClass: 'activP', //active 类样式定义
callBack: function (page) {
temp(page,true);
}
});
}
function getVar(result)
{
totalPages = result;
tempPage(totalPages);
temp(page, true)
}
function temp(index,judge){
$.ajax({
type:"POST",
//提交的网址
url:url,
//提交的数据
data:{
"pageSize":count,
"pageIndex":index
},
//返回数据的格式
datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
//成功返回之后调用的函数
success:function(d){
if (d != null && d.Data != null) {
if (judge == true) {
console.log(d);
}
else {
getVar(d.Data.PageCount);
}
}
},
//调用出错执行的函数
error: function(){
//请求出错处理
}
});
}
嘿哈,这就完成啦,最后附上一张效果图。