1、分页功能实现效果如下:
2、代码如下
.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;
}
![]() |
![]() |
| 第页 | 共页 | | ![]() |
![]() |
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 = "
| " + data[index].title + " | "
$(".ui-tab").append(infor_title)
})
}
//为测试分页功能代码,进行网络请求后便不需要
function information_display2() {
var data = [
{ "title": "第二页-今日日志反反复复付付付"}
];
$(".ui-tab").empty()
$.each(data, function (index, n) {
var infor_title = "
| " + data[index].title + " | "
$(".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)
}
}
转自:https://blog.csdn.net/zrcj0706/article/details/95043343
各品牌紫色手机大集合 魅族华为苹果…你最喜欢哪款?模拟钢琴软件



