layui分页的使用

html:

<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<div id="test1"></div>
<ul id="biuuu_city_list"></ul>
<script src="~/Content/layui/layui.js"></script>

js:

<script>
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: data.length-1 //数据总数，从服务端得到
            , theme: '#062EFB'  //自定义主题。支持传入：颜色值，或任意普通字符  theme: 'xxx' /
            , hash: 'fenye' //自定义hash值
            , limits: [14, 30, 20, 10, 60]//每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , groups: 5
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
               // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function () {
                    var arr = []
                        , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);

                    console.log(data);
                    console.log(obj.curr * obj.limit - obj.limit);
                    console.log( obj.limit);
                    console.log(thisData);
                    layui.each(thisData, function (index, item) {
                        console.log(index, item);
                        arr.push('<li>' + item + '</li>');
                    });
                    return arr.join('');
                }();
                //首次不执行
                if (!first) {
                    //do something
                }
            }
        });
    });
</script>

效果：