laypage分页控件的使用

最新推荐文章于 2021-02-13 07:59:39 发布

Nemo_XP

最新推荐文章于 2021-02-13 07:59:39 发布

阅读量549

点赞数

分类专栏： C#

本文链接：https://blog.csdn.net/spw55381155/article/details/86540260

版权

C# 专栏收录该内容

81 篇文章 5 订阅

订阅专栏

laypage 多功能JavaScript分页组件 v1.3的使用和代码说明

<!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="biuuu_city_list"></ul>

    <div id="biuuu_city"></div>

    <div style="width:800px; margin:100px 0 0; font-size:14px;">
        <p>====================================================================</p>
        <p>只需引入laypage.js即可</p>
        <p>详细文档打开demo，或者直接进入官网：<a href="http://laypage.layui.com">http://laypage.layui.com</a></p>
    </div>

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

        //测试数据
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];

        var nums = 5; //每页出现的数量
        var pages = Math.ceil(data.length / nums); //得到总页数

        var thisDate = function (curr) {//此方法用于通过页码,return所需要的数据
            //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
            var str = '', last = curr * nums;//第n页满额的值curr * nums,例如第2页每页5条,last默认第十条数据
            last = last <= data.length ? last : data.length;//如第2页每页5条,满额值10<共11个
            for (var i = (curr - 1) * nums; i < last; i++) {//i是下标
                str += '<li>' + data[i] + '</li>';
            }
            return str;
        };

        //调用分页
        laypage({
            cont: 'biuuu_city',//分页控件的容器
            pages: pages,    总页数
            jump: function (obj) {  //触发分页后的回调:把当页的数据放到数据控件中
                document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
            }
        })
    </script>
</body>
</html>

js下载地址:https://www.jb51.net/codes/309232.html

其他资料:https://www.jianshu.com/p/b5dffff259be
http://www.jq22.com/jquery-info6462