分頁樣式
{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';//數(shù)據(jù)顯示
$.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");//替換數(shù)據(jù)
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("當前已經(jīng)是第一頁..")
return;
}
page = 1;
Load();//加載數(shù)據(jù)
});
//給尾頁添加點擊事件
$("#final").click(function () {
if(page==maxys){
alert("當前已經(jīng)是最后一頁");
return;
}
page = maxys;
Load();//加載數(shù)據(jù)
});
//給上一頁添加點擊事件
$("#prev").click(function () {
page = page - 1;
if (page < 1) {
page = 1;
alert("當前已經(jīng)是第一頁...");
return;
}
Load();//加載數(shù)據(jù)
});
//給下一頁加點擊事件
$("#next").click(function () {
page = page + 1;
if (page > maxys) {
page = maxys;
alert("當前已經(jīng)是最后一頁....");
return;
}
Load();//加載數(shù)據(jù)
});
//給中間的列表加事件
$(".list").click(function () {
page = parseInt($(this).attr("bs"));
Load();//加載數(shù)據(jù)
});
}, error: function (err) {
alert("系統(tǒng)正忙甫贯，請稍后....");
}
});
};
$(function(){
Load();
})
后臺分頁
1，先寫個分頁的工具類PageBean
public class PageBean<T> {
private final static int PAGEITEMCOUNT = 10; // 顯示頁碼條目數(shù)，即頁碼數(shù)量頂多是10個
private List<T> list; // 保存查詢的結(jié)果集合
private int totalRecord; // 總記錄數(shù)
private int pageSize = 15; // 頁面顯示的數(shù)目
private Integer totalPage; // 總頁碼數(shù)
private int currentPage = 1; // 當前頁碼
private int previousPage; // 前一頁
private int nextPage; // 后一頁
private int[] pageBar; // 條目數(shù)
private int startIndex; // 開始頁
private int endIndex; // 結(jié)束頁
public int getStartIndex() {
this.startIndex = (this.currentPage - 1) * this.pageSize;
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public int getEndIndex() { // 從數(shù)據(jù)庫中獲取的結(jié)束索引，供頁面使用
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() { // 得到總頁碼數(shù)
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，則說明當前頁碼已經(jīng)是第一頁了
this.previousPage = 1;
} else {
this.previousPage = this.currentPage - 1;
}
return previousPage;
}
public int getNextPage() {
if (this.currentPage + 1 >= this.totalPage) { // 如果下一頁大于總數(shù)頁艳丛，則說明當前頁碼已經(jīng)是最后一頁了
this.nextPage = this.totalPage;
} else {
this.nextPage = this.currentPage + 1;
}
return nextPage;
}
public int[] getPageBar() {
int startPage; // 記住頁碼的起始位置
int endPage; // 記住頁碼的結(jié)束位置，因為頁碼條目是既定的趟紊，由startpage氮双，endpage兩個變量通過循環(huán)就可以得全部頁碼
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));//設(shè)置總頁數(shù)
pageBean.getTotalPage();//獲取總頁數(shù)
pageBean.setPageSize(pageSize);
pageBean.setCurrentPage(page);//設(shè)置當前頁
PageHelper.startPage(page, pageSize);//mybatis分頁
List<ZhangWuEntity> list = zhangWuMapper.TermShow(seanum);
pageBean.setList(list);
result.setData(pageBean);
}
mapper
//查詢總記錄數(shù) 用like做模糊查詢
@Select("select count(*) from gjp_zhangwu where username like \"%${seanum}%\" ")
int TermShowPage(@Param(value="seanum")String seanum);
//獲取當前頁的數(shù)據(jù)
@Select("select * from gjp_zhangwu a where a.username like \"%${seanum}%\" ")
List<ZhangWuEntity> TermShow(@Param(value = "seanum") String seanum);
導入jar參照下方的通用分頁 網(wǎng)址 https://blog.csdn.net/qq_28988969/article/details/78082116
配置yml 參照下方網(wǎng)址https://blog.csdn.net/qq_28988969/article/details/78082116
