昊圼氜
作者:程序猿的月光宝盒
//当前页 private int pagenum; //每页的数量 private int pagesize; //当前页的数量 private int size; //总页数 private int pages; //第一页 private int firstpage; //上一页 private int prepage; //下一页 private int nextpage; //总记录数 private long total; //由于startrow和endrow不常用，这里说个具体的用法 //可以在页面中"显示startrow到endrow 共size条数据" //当前页面第一个元素在数据库中的行号 private int startrow; //当前页面最后一个元素在数据库中的行号 private int endrow; //结果集 private list<t> list; //是否为第一页 private boolean isfirstpage = false; //是否为最后一页 private boolean islastpage = false; //是否有前一页 private boolean haspreviouspage = false; //是否有下一页 private boolean hasnextpage = false; //导航页码数 private int navigatepages; //所有导航页号 private int[] navigatepagenums; //导航条上的第一页 private int navigatefirstpage; //导航条上的最后一页 private int navigatelastpage;
项目中使用了mybatis的pagehelper分页插件后的js文件
/**
* 初始化首页数据
*/
function initdata(pageno) {
//清空原来的数据,找到第一个以外的tr,并移除,用 :gt()
$("tr:gt(0)").remove();
$.ajax({
url: "showinvi.do",
type: "post",
datatype: "json",
data: {"pageno": pageno},
async: true,
success: function (obj) {
console.log(obj);
if (obj.size === 0) {//如果没有数据
var str = `
<tr>
<td colspan="5">没有符合条件的数据</td>
</tr>
`;
$("#datatble").append(str);
$("p").html("");
} else {
$.each(obj.list, function (i) {
var str = `
<tr>
<td>${obj.list[i].title}</td>
<td>${obj.list[i].summary}</td>
<td>${obj.list[i].author}</td>
<td>${obj.list[i].createdate}</td>
<td>
<a onclick="del(${obj.list[i].id},'${obj.list[i].title}');">删除</a>
</td>
</tr>
`;
$("#datatble").append(str);
});
$("tr:gt(0):odd").attr("style", "background-color:#90ee90");
//分页,我是放在一个p标签里
var pagefoot = $("p");
//在分页前,清空原来分页的内容
pagefoot.html("");
var pagestr = "";
if (obj.total === 0) {//如果没有数据,就不显示分页条
return;
}
if (obj.isfirstpage && obj.hasnextpage) {//如果是第一页,并且还有下一页
pagestr = `
<a style="text-decoration: none;color: grey;cursor:no-drop;">首 页</a>|
<a style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>|
<a onclick="initdata(${obj.nextpage});">下一页>></a>|
<a onclick="initdata(${obj.pages});">尾 页</a>
`
} else if (obj.isfirstpage && !obj.hasnextpage) {//如果是第一页,并且没有下一页
pagestr = ``//nothing to do
} else if (!obj.isfirstpage && obj.hasnextpage) {//如果不是第一页,并且还有下一页
pagestr = `
<a onclick="initdata(1)">首 页</a>|
<a onclick="initdata(${obj.prepage});"><< 上一页</a>|
<a onclick="initdata(${obj.nextpage});">下一页>></a>|
<a onclick="initdata(${obj.pages});">尾 页</a>
`
} else if (!obj.isfirstpage && !obj.hasnextpage) {//如果不是第一页,且没有下一页
pagestr = `
<a onclick="initdata(${obj.firstpage});">首 页</a>|
<a onclick="initdata(${obj.prepage});"><< 上一页</a>|
<a style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>|
<a style="text-decoration: none;color: grey;cursor:no-drop;">尾 页</a>
`
}
pagestr += `
第
${obj.pagenum}
页/共
${obj.pages}
页(${obj.total}条)
`;
pagefoot.append(pagestr);
}
}, error: function () {
alert("initdata error");
}
})
}
基本上分页部分可以作为模板
他对应的html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<center>
<h1>帖子列表</h1>
<hr/>
<form id="findinvis">
帖子标题:
<input title="请输入帖子标题" name="title">
<!--input的类型还是submit-->
<input type="submit" value="搜索" >
</form>
<div id="infos">
<br/>
<table border="1" style="width: 100%;text-align: center" id="datatble">
<tr style="background-color: #6fabc1;">
<td>标题</td>
<td>内容摘要</td>
<td>作者</td>
<td>发布时间</td>
<td>操作</td>
</tr>
</table>
<p></p>
</div>
</center>
<script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script rel="script" type="text/javascript" src="js/list.js"></script>
</body>
</html>
对应的serviceimpl
@override
public pageinfo<map<string, object>> selectbyprimarykey(integer invid,integer pageno) {
pagehelper.startpage(pageno,4);
list<map<string, object>> maps = replydetailmapper.selectbyprimarykey(invid);
return new pageinfo<> (maps);
}
对应的controller,是标注@restcontroller的
@requestmapping("/showinvi.do")
public pageinfo<map<string, object>> selectbytitle(invitation invitation,integer pageno) {
return invitationservice.selectbytitle(invitation,pageno);
}
