1、分页功能实现效果如下:
2、代码如下
代码语言:javascript复制<!DOCTYPE html >
<html>
<head>
<title> 消息呈现 </title>
<link rel="icon" href="picture.ico" type="image/x-icon" />
<script src="../js/jquery.min.js"></script>
<style type="text/css">
.title {
padding:5px;
background: #F7F7F7;
text-align: center;
vertical-align: middle;
border-radius: 12px;
margin-bottom: 16px;
margin-top: 10px;
color: #616161;
font-size: 16px;
}
.font {
color: #00a5e0;
font-size: 14px;
}
.paging {
width: 1660px;
height: 40px;
background: #EFF3F8;
padding-top: 8px;
padding-left: 30px;
margin-top: 20px;
}
.page-font {
color: #292929;
font-size: 14px;
}
</style>
</head>
<body>
<div class="ui-tab">
<!-- 具体消息内容 -->
</div>
<div class="paging">
<!-- 分页布局-->
<table>
<tr class="page-font">
<td width=""><img src="../image/first.png" width="24px" height="25px" class="firstPage" onclick="page_click(this)" /></td>
<td><img src="../image/before.png" width="27px" height="22px" class="beforePage" onclick="page_click(this)" /></td>
<td> | 第<input type="button" class="currentPage" value="1" readonly="readonly">页</td>
<td> 共<input type="button" class="totalPage" value="1" readonly="readonly">页 | </td>
<td><img src="../image/next.png" width="27px" height="26px" class="nextPage" onclick="page_click(this)" /></td>
<td><img src="../image/last.png" width="27px" height="24px" class="lastPage" onclick="page_click(this)" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
var totalPage = 10; //一共多少页
var currentPage = 1;//当前页码
var information_lenght = []
//前端获取后台数据并呈现方法
function information_display() {
var data = [
{ "title": "第一页-今日日志"},
{ "title": "第一页-今日日志"},
];
$(".ui-tab").empty()
$.each(data, function (index, n) {
var infor_title = "<table class="title">"
"<tr >"
"<td>" data[index].title "</td>"
"</tr>"
"</table>";
$(".ui-tab").append(infor_title)
})
}
//为测试分页功能代码,进行网络请求后便不需要
function information_display2() {
var data = [
{ "title": "第二页-今日日志反反复复付付付"}
];
$(".ui-tab").empty()
$.each(data, function (index, n) {
var infor_title = "<table class="title">"
"<tr >"
"<td>" data[index].title "</td>"
"</tr>"
"</table>";
$(".ui-tab").append(infor_title)
})
}
//初始化加载,分页首页数据,输入:每页多少条数据,当前页(默认为1);输出:当前页数据和总页数
window.onload = function () {
$(".totalPage").attr("value", totalPage)
information_display()
}
//上一页、下一页,首页和尾页的单击触发事件
function page_click(item) {
console.log(item)
//首页
if ($(item).attr("class") == "firstPage") {
console.log("firstPage")
pageNumber = parseInt($(".currentPage").attr("value"));
$(".currentPage").attr("value", 1)
}
//上一页
else if ($(item).attr("class") == "beforePage") {
console.log("beforePage")
pageNumber = parseInt($(".currentPage").attr("value"));
if (pageNumber > 1) {
$(".currentPage").attr("value", pageNumber - 1)
information_display()
}
else {
$(".beforePage").attr("disabled", false)
}
}
//下一页
else if ($(item).attr("class") == "nextPage") {
console.log("nextPage")
pageNumber = parseInt($(".currentPage").attr("value"));
if (pageNumber < totalPage) {
$(".currentPage").attr("value", pageNumber 1)
information_display2()
}
else {
$(".nextPage").attr("disabled", false)
}
}
//尾页
else {
console.log("lastPage")
pageNumber = parseInt($(".currentPage").attr("value"));
$(".currentPage").attr("value", totalPage)
}
}
</script>
</body>
</html>
完整项目:http://github.crmeb.net/u/defu