1、导入jquery文件
2、需要分页的信息
<table class="layui-table">
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>身份证号码</th>
<th>电话号码</th>
<th>工资</th>
<th>登录账号</th>
<th>登录密码</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody id="pageMain">
<tr th:each="employee:${employeeList}">
<td th:text="${employee.getEid()}"></td>
<td th:text="${employee.getEname()}"></td>
<td th:text="${employee.getEgender()}"></td>
<td th:text="${employee.getEnumber()}"></td>
<td th:text="${employee.getEphone()}"></td>
<td th:text="${employee.getEsalary()}+'元'"></td>
<td th:text="${employee.getEusername()}"></td>
<td th:text="${employee.getEpassword()}"></td>
<td th:text="${employee.getEremark()}"></td>
<td>
<button class="layui-btn layui-btn-xs" th:οnclick="|updateBut('@{/toUpdateEmployee?eid=}+${employee.getEid()}')|">修改</button>
<button class="layui-btn layui-btn-xs" th:οnclick="|deleteOne('@{/employee_deleteOne?eid=}+${employee.getEid()}')|">删除</button>
</td>
</tr>
</tbody>
</table>
3、分页连接代码
<div id="pageBox" class="digg">
<span id="prev" class="disabled">上一页</span>
<span id="pageNav">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
<a href="javascript:;">7</a>
<a href="javascript:;">8</a>
</span>
<span class="disabled" id="next">下一页</span>
<span id="curye" style="color: red"></span>
</div>
4、css样式
<style>
DIV.digg {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px;
BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px;
BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid;
COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #1583ee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #1583ee 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #1583ee 1px solid; COLOR: #162fee; PADDING-TOP: 2px;
BORDER-BOTTOM: #1583ee 1px solid
}
</style>
5、js代码
//分页的js
$(function() {
fenye2();
});
function fenye2() {
var tabPage;
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 6,
/*每页显示的条数*/
activeClass: 'active',
/*高亮显示的class*/
ini: 0,
/*初始化显示的页面*/
curye:"#curye"
});
function tabPage(tabPage) {
var pageMain = $(tabPage.pageMain);
/*获取内容列表*/
var pageNav = $(tabPage.pageNav);
/*获取分页*/
var pagePrev = $(tabPage.pagePrev);
/*上一页*/
var pageNext = $(tabPage.pageNext);
/*下一页*/
var curye=$(tabPage.curye);
var curNum = tabPage.curNum;
/*每页显示数*/
var len = Math.ceil(pageMain.find("tr").length / curNum);
/*计算总页数*/
// console.log(len);
var pageList = '';
/*生成页码*/
var iNum = 0;
/*当前的索引值*/
for (var i = 0; i < len; i++) {
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
pageNav.html(pageList);
curye.html("当前是第"+(iNum+1)+"页");
/*头一页加高亮显示*/
pageNav.find("a:first").addClass(tabPage.activeClass);
/*******标签页的点击事件*******/
pageNav.find("a").each(
function () {
$(this)
.click(
function () {
pageNav.find("a").removeClass(
tabPage.activeClass);
$(this).addClass(
tabPage.activeClass);
iNum = $(this).index();
curye.html("当前是第"+(iNum+1)+"页");
$(pageMain).find("tr").hide();
for (var i = ($(this).html() - 1)
* curNum; i < ($(this)
.html())
* curNum; i++) {
$(pageMain).find("tr").eq(i)
.show()
}
});
})
$(pageMain).find("tr").hide();
/************首页的显示*********/
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
/*下一页*/
pageNext.click(function () {
$(pageMain).find("tr").hide();
if (iNum == len - 1) {
alert('已经是最后一页');
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
// ini(iNum);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
/*上一页*/
pagePrev.click(function () {
$(pageMain).find("tr").hide();
if (iNum == 0) {
alert('当前是第一页');
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
})
}
}