分页样式
{style}
page span{margin-right: 5px;display: block;cursor: pointer;float: left;height: 29px;
line-height: 29px;}
.page span#prev,.page span.list,.page span#next,.page span#first,.page span#final{height: 19px;width :50px;background: linear-gradient(to bottom,#fff,#ebeff3,#edf2f8);border: 1px solid #d4d4d4;padding: 5px 10px;border-radius: 3px; color: #293048; line-height: 18px;text-align: center;}
.page span#prev,.page span#next,.page span#first,.page span#final{width: 64px}
.page span.dangqian span{height: 19px;width :50px;background: linear-gradient(to bottom,#fff,#ebeff3,#edf2f8);border:
1px solid #d4d4d4;padding: 5px 10px;border-radius: 3px; color: #293048; line-height: 18px;text-align: center;}
{/style}
前端
<script src="js/jquery.js"></script>
<script src="../home/js/dateformat.js"></script>
<div id="Information" class="page" style="float:right "></div>//必须要写分页替换的地方
<div class="text-c">
<input type="text" class="input-text" style="width:250px" placeholder="输入员工名称" id="seanum" name="seanum">
<button type="submit" class="btn btn-success radius" onclick="Loadsearch()"><i class="Hui-iconfont"></i> 搜流水清单</button> </div>
<label>显示 <select name="pageSize" onclick="Loadsearch()" ><option value="5">5</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> 条</label>
<thead>
<tr class="text-c">
<th width="80" name="zwid">ID</th>
<th width="80"name="username">员工名称</th>
<th width="100"name="finame">分类名称</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
<script id="tmplArticle" type="text/x-jquery-tmpl">
<tr class="text-c">
<td data-name='zwid'>${zwid}</td>
<th data-name='username'>${username}</td>
<th data-name='finame'>${flname==1?"工资支出":flname==2?"服装收入":flname==3?"吃饭支出" :flname==4?"礼金支出":flname==5?"交通支出":flname==6?"股票收入":"其他支出" }</td>
</tr>
</script>
***********************************
<script src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript">
function Loadsearch(){
$("#tbody").html("");//清空页面的值
page=1;
Load();
}
//查询和显示，
var page=1;
var Load=function(){
$("#tbody").html("");//清空页面的值
var pageSize = $.trim($('[name="pageSize"]').val())
var seanum=$("#seanum").val();
var url = '/api/termshow';//数据显示
$.ajax({
type: "POST"
async: false,
url: url,
dataType: "json",
data: {page:page,pageSize:pageSize,seanum:seanum},
success: function (response) {
$("#tmplArticle").tmpl(response.data.list).appendTo("#tbody");//替换数据
var list=response.list;
var str = "";
var minys = 1;
var maxys = 1;
if(response.data.totalRecord!=0){
maxys=response.data.totalPage;
}
str += "<span>总共:" + maxys + "页</span>";
str += "<span>当前:" + page + "/" + maxys + "页</span>";
str += "<span id='first'>首页</span>";
str += "<span id='prev'>上一页</span>";
for (var i = page - 2; i < page + 3; i++) {
if (i > minys && i < maxys) {
if (i > minys && i <= maxys) {
if (i == page) {
str += "<span class='dangqian' bs='" + i + "'>" + "<span >" + i + "</span>" + "</span>";
} else {
str += "<span class='list' bs='" + i + "'>" + i + "</span>"
}
}
}
}
str += "<span id='next'> 下一页</span>"
str += "<span id='final'> 尾页</span>"
$("#Information").html(str);//将分页放入页面
$("strong").html(response.data.totalRecord);
//给首页添加点击事件
$("#first").click(function () {
if(page==1){
alert("当前已经是第一页..")
return;
}
page = 1;
Load();//加载数据
});
//给尾页添加点击事件
$("#final").click(function () {
if(page==maxys){
alert("当前已经是最后一页");
return;
}
page = maxys;
Load();//加载数据
});
//给上一页添加点击事件
$("#prev").click(function () {
page = page - 1;
if (page < 1) {
page = 1;
alert("当前已经是第一页...");
return;
}
Load();//加载数据
});
//给下一页加点击事件
$("#next").click(function () {
page = page + 1;
if (page > maxys) {
page = maxys;
alert("当前已经是最后一页....");
return;
}
Load();//加载数据
});
//给中间的列表加事件
$(".list").click(function () {
page = parseInt($(this).attr("bs"));
Load();//加载数据
});
}, error: function (err) {
alert("系统正忙，请稍后....");
}
});
};
$(function(){
Load();
})
后台分页
1，先写个分页的工具类PageBean
public class PageBean<T> {
private final static int PAGEITEMCOUNT = 10; // 显示页码条目数，即页码数量顶多是10个
private List<T> list; // 保存查询的结果集合
private int totalRecord; // 总记录数
private int pageSize = 15; // 页面显示的数目
private Integer totalPage; // 总页码数
private int currentPage = 1; // 当前页码
private int previousPage; // 前一页
private int nextPage; // 后一页
private int[] pageBar; // 条目数
private int startIndex; // 开始页
private int endIndex; // 结束页
public int getStartIndex() {
this.startIndex = (this.currentPage - 1) * this.pageSize;
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public int getEndIndex() { // 从数据库中获取的结束索引，供页面使用
int end = this.getStartIndex() + this.getPageSize(); // 不包含最后一条记录-1
if (end > this.getTotalRecord()) {
end = this.getStartIndex() + (this.getTotalRecord() % this.getPageSize());
}
this.endIndex = end;
return this.endIndex;
}
public void setEndIndex(int endIndex) {
this.endIndex = endIndex;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public Integer getTotalPage() { // 得到总页码数
if (this.totalRecord % this.pageSize == 0) {
this.totalPage = this.totalRecord / this.pageSize;
} else {
this.totalPage = this.totalRecord / this.pageSize + 1;
}
return totalPage;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getPreviousPage() {
if (this.currentPage - 1 < 1) { // 如果上一页小于1，则说明当前页码已经是第一页了
this.previousPage = 1;
} else {
this.previousPage = this.currentPage - 1;
}
return previousPage;
}
public int getNextPage() {
if (this.currentPage + 1 >= this.totalPage) { // 如果下一页大于总数页，则说明当前页码已经是最后一页了
this.nextPage = this.totalPage;
} else {
this.nextPage = this.currentPage + 1;
}
return nextPage;
}
public int[] getPageBar() {
int startPage; // 记住页码的起始位置
int endPage; // 记住页码的结束位置，因为页码条目是既定的，由startpage，endpage两个变量通过循环就可以得全部页码
int pageBar[] = null;
if (this.getTotalPage() <= PAGEITEMCOUNT) { // 当总页码不足或等于既定页面大小时
pageBar = new int[this.totalPage];
startPage = 1;
endPage = this.totalPage
} else { // 当总页码大于既定页面大小时
pageBar = new int[PAGEITEMCOUNT];
startPage = this.currentPage - (PAGEITEMCOUNT / 2 - 1); // 为了保证当前页在中间
endPage = this.currentPage + PAGEITEMCOUNT / 2;
if (startPage < 1) {
startPage = 1;
endPage = PAGEITEMCOUNT;
}
if (endPage > this.totalPage) {
endPage = this.totalPage;
startPage = this.totalPage - (PAGEITEMCOUNT - 1);
}
}
int index = 0;
for (int i = startPage; i <= endPage; i++) {
pageBar[index++] = i;
}
this.pageBar = pageBar;
return this.pageBar;
}
}
controller
@RequestMapping("/termshow")
public String TermShow(int page, String seanum, int pageSize) throws IOException {
APIResultModel result = new APIResultModel();
result = zhangWuService.TermShow(page, seanum, pageSize, result);
return result.toString();
}
service
1,在service头部配置下
@Service
@Transactional(rollbackFor = { RuntimeException.class, Exception.class })//分页必须的配置
public class ZhangWuService {
public APIResultModel TermShow(int page, String seanum, int pageSize, APIResultModel result) throws IOException {
PageBean<ZhangWuEntity> pageBean = new PageBean<>();
pageBean.setTotalRecord(zhangWuMapper.TermShowPage(seanum));//设置总页数
pageBean.getTotalPage();//获取总页数
pageBean.setPageSize(pageSize);
pageBean.setCurrentPage(page);//设置当前页
PageHelper.startPage(page, pageSize);//mybatis分页
List<ZhangWuEntity> list = zhangWuMapper.TermShow(seanum);
pageBean.setList(list);
result.setData(pageBean);
}
mapper
//查询总记录数 用like做模糊查询
@Select("select count(*) from gjp_zhangwu where username like \"%${seanum}%\" ")
int TermShowPage(@Param(value="seanum")String seanum);
//获取当前页的数据
@Select("select * from gjp_zhangwu a where a.username like \"%${seanum}%\" ")
List<ZhangWuEntity> TermShow(@Param(value = "seanum") String seanum);
导入jar参照下方的通用分页 网址 https://blog.csdn.net/qq_28988969/article/details/78082116
配置yml 参照下方网址https://blog.csdn.net/qq_28988969/article/details/78082116
