分页插件_list版

最新推荐文章于 2021-08-31 10:13:23 发布

BAStriver

最新推荐文章于 2021-08-31 10:13:23 发布

阅读量512

点赞数

分类专栏： # JQuery # JavaScript 文章标签： javascript 插件 jQuery插件

本文链接：https://blog.csdn.net/BAStriver/article/details/72229249

版权

JQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layPage demo</title>
<meta name="keywords" content="分页插件,ajax分页,异步分页">
<meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
</head>
<body>

<ul id="teacherList">
        <!--被分页的列表放这里-->
</ul>

<div id="paginator">
    <!--自动生成分页按钮的地方-->
</div>


<script src="laypage/laypage.js"></script>
<script>

//测试数据
var data = [{"job":"教授","t_id":1,"t_name":"曾老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":2,"t_name":"a1老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":3,"t_name":"a2老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":4,"t_name":"a3老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":5,"t_name":"az老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":6,"t_name":"a4老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":7,"t_name":"a5老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":8,"t_name":"a22老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":9,"t_name":"a11老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":10,"t_name":"a222老师","t_password":"","t_phone":"13714791078","t_sex":"女"},
    {"job":"教授","t_id":10,"t_name":"a222老师","t_password":"","t_phone":"13714791078","t_sex":"女"},
    {"job":"教授","t_id":1,"t_name":"曾老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":2,"t_name":"a1老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":3,"t_name":"a2老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":4,"t_name":"a3老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":5,"t_name":"az老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":6,"t_name":"a4老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":7,"t_name":"a5老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":8,"t_name":"a22老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":9,"t_name":"a11老师","t_password":"","t_phone":"13714791078","t_sex":"男"},
    {"job":"教授","t_id":10,"t_name":"a222老师","t_password":"","t_phone":"13714791078","t_sex":"女"},
    {"job":"教授","t_id":10,"t_name":"a222老师","t_password":"","t_phone":"13714791078","t_sex":"女"}];

var nums = 5; //每页出现的数量
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++){
        str += '<li>'+ data[i].t_name +'</li>';  // 这中间填数据
    }
    return str;
};

//调用分页
laypage({
    cont: 'paginator',
    pages: pages,  // 页数
    skin: '#46b8da', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
    skip: true, //是否开启跳页
    jump: function(obj){
        // 列表的数据填充到这个teacherList里面
        document.getElementById('teacherList').innerHTML = thisDate(obj.curr);
    }
})
</script>


</body>
</html>

按照以上的代码即可将ul里的li全部分页了。

下载附件