layui是一款很经典的前端UI框架。因为其功能强大，界面清爽美观，容易上手，深受大家的喜爱。此文主要介绍layui下面的laypage，也就是分页功能。我们在做项目的过程中经常会碰到分页这样的需求，使用laypage可以快速高效的实现功能，完成需求。
laypage的分页逻辑十分的出众，可以实现异步分页，也可以实现页面的刷新分页。调用方式也是十分的简单。现在通过一个简单的案例来教大家使用laypage实现分页功能。
一，引入需要的css和js文件
需要引入的css文件：
<link rel="stylesheet" href="laypage/skin/laypage.css" />
需要引入的js文件：
<script type="text/javascript" src="laypage/jquery.min.js"></script>
<script type="text/javascript" src="laypage/laypage.js"></script>
二，实现代码
HTML代码：
<body>
<div class="news">
<div class="content wide" id="allNews"></div>
<div id="newsPage"></div>
</div>
</body>
CSS代码：
#laypage_0 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.news-item a {
text-decoration: none;
color: #333333;
}
.news-item a:hover {
text-decoration: underline;
color: #6096ec;
}
#allNews {
margin-top: 30px;
}
.news {
margin: auto;
}
.content .news-item {
padding: 15px 45px;
padding-right: 0;
margin: auto 80px;
background-image: url('../image/hot.png');
background-position: left;
background-repeat: no-repeat;
}
.content .news-item.top {
background-image: url('../image/top.png');
}
.content .news-title {
font-size: 20px;
color: #333333;
text-decoration: none;
}
.content .news-title:hover {
color: #1886F6;
text-decoration: underline;
}
.content .news-time {
float: right;
font-size: 10px;
color: #A0A0A0;
}
.content {
width: 55%;
max-width: 750px;
min-width: 750px;
margin: auto;
}
.content.wide {
width: 75%;
max-width: 980px;
min-width: 950px;
margin: auto;
}
JS代码：
$(function() {
//此处使用了json文件模拟接口来调取数据
$.getJSON("json/news.json", function(data) {
for(var i = 0; i < data.length - 1; i++) {
var obj = data[i];
var div = $('<div class="news-item"></div>');
var a = $('<a href="' + obj.link + 'class="news-title" target="_blank">' + obj.title + '</a>');
var span = $('<span class="news-time">' + obj.time + '</span>');
div.append(a, span);
$('#allNews').append(div);
}
var nums = 12; //每页出现的数量
var pages = Math.ceil(data.length / nums); //得到总页数
var thisDate = function(curr) {
var str = '',
last = curr * nums - 1;
last = last >= data.length ? (data.length - 1) : last;
for(var i = (curr * nums - nums); i <= last; i++) {
console.log(data[i]);
str += '<div class="news-item">' + '<a href="' + data[i].link + '"class="news-title" target="_blank">' + data[i].title + '</a>' + '<span class="news-time">' + data[i].time + '</span>' + '</div>';
}
return str;
};
//调用分页
laypage({
cont: 'newsPage',
pages: pages,
jump: function(obj) {
document.getElementById('allNews').innerHTML = thisDate(obj.curr);
},
prev: '<',
next: '>',
skin: '#f9c357',
})
})
})
三，实现效果
效果图如下：
分页效果图.png
四，文档解读
laypage给我们提供了许多基本参数，通过设置这些参数，可以满足我们各式各样的分页需求。有兴趣的可以直接去官网解读下laypage的文档：http://www.layui.com/doc/modules/laypage.html
网友评论
link引入的小于style中写的，style中的小于行内直接写的样式