分页插件_list版

桃扇骨 2022-06-16 12:47 157阅读 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全部分页了。

[下载附件][Link 1]

[Link 1]: http://download.csdn.net/detail/bastriver/9843106