JS前端分页组件layPage

新年第一篇博文。

layPage是作者贤心为其layui体系所写的一款前端JS分页插件。layPage官网为http://sentsin.com/layui/laypage/,layPage依赖于jQuery,在引用它之前必须先引入jquery。

示例代码:

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>layPage演示</title>
    <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
    
    <script type="text/javascript" src="layPage/laypage.js"></script>
</head>
<body>
    <div class="view" style="margin: 10px auto;"></div>
    <div class="page"></div>
<script type="text/javascript">
laypage({
    cont: $('.page'), //容器。值支持id名、原生dom对象,jquery对象,
    pages: 100, //总页数
    skip: false, //是否开启跳页
    skin: 'molv',
    groups: 3, //连续显示分页数
    first: '首页', //若不显示,设置false即可
    last: '尾页', //若不显示,设置false即可
    prev: '<', //若不显示,设置false即可
    next: '>', //若不显示,设置false即可
    hash: true, //开启hash
    jump: function(obj){ //触发分页后的回调
        $('.view').html('目前正在第'+ obj.curr +'页,一共有:'+ obj.pages +'页');
    }
});
</script>
</body>
</html>

处理分页之后数据的逻辑主要在jump function里面,可以配合后端回调json数据插入。

标签:laypage