强大的分页工具----layPage

来源：互联网发布：php 数组长度函数编辑：程序博客网时间：2024/05/17 21:56

layPage官网:http://www.layui.com/laypage/ .

laypage强大在哪里呢？

我们都知道用后台写分页是件麻烦事，layPage正是解决了这些繁琐的操作。那么分页的任务就让我们交给layPage吧。

根据贤心作者的demo，让咱们耍耍吧。

首先官方下载layPage ，由于layPage功能已经比较完善估计以后很少更新了。

解压layPage 把laypage文件夹放到你的项目，只需要引入js就够了。

官方Demo：

<!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整个目录放入你的项目，只需引入laypage.js即可，其它一律无视。</p>    <p>详细文档打开demo，或者直接进入官网：<a href="http://laypage.layui.com">http://laypage.layui.com</a></p>    <p>使用时请保留来源，感谢支持。</p>    <p>MIT 最终解释权：贤心 - layui.com</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){    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据    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] +'</li>';    }    return str;};//调用分页laypage({    cont: 'biuuu_city',    pages: pages,    jump: function(obj){        document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);    }})</script></body></html>

看看这个效果：
这里写图片描述

我根据这个demo使用了ajax加载，随便改了改就可以了。

页面东西太多我只贴上相关的

<script type="text/javascript" src="${ctxStatic}/laypage/laypage.js"></script>/* 这里写ajax请求的数据 */<ul id="biuuu_city_list" class="fly-list"></ul>/* 这里写分页的显示 */<div id="biuuu_city" style="text-align: center;"></div><script type="text/javascript">$(document).ready(function(){    $.ajax({        method:'post',        url:'${ctx}/getAllPostsList',        dataType:'json',        success:function(data){            if(data.length>0){                var nums = 5; //每页出现的数量                var pages = Math.ceil((data.length)/nums); //得到总页数                alert("nums:"+nums+"pages:"+pages);                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++){                /*for(var i=0;i<data.length;i++){*/                    str+='<li class="fly-list-li">'                        +'<a href="user/home.html" class="fly-list-avatar">'                        +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'                        +'</a>'                        +'<h2 class="fly-tip">'                        +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'                        +'</h2>'                        +'<p>'                        +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'                        +'<span>'+data[i].starttime+'</span>'                        +'<span>layui框架综合</span>'                        +'<span class="fly-list-hint">'                         +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''                        +'<i class="iconfont" title="人气">&#xe60b;</i> '+data[i].view+''                        +'</span>'                        +'</p>'                        +'</li>';                    }                return str;                };                //调用分页                laypage({                    cont: 'biuuu_city',                    pages: pages, //总页数                     groups:3, //连续显示的分页数                     skip:true,//是否显示跳转                     skin:'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00                    jump: function(obj,first){                    document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);                    /* if(!first){                        layer.msg('第 '+ obj.curr +' 页');                    } 点击弹出当前点击页数 */                    }                })            }        }    })  })</script>

是不是发现并没有写了多少东西也就十多行的代码这样分页就已经实现了。

文档还没研究过，不过这足以证明layPage的强大了

这里写图片描述

layUI 里有这个社区的模版可以下载下来自己没事改造改造。

阅读全文

0 0

强大的分页工具----layPage

layPage官网:http://www.layui.com/laypage/ .

laypage强大在哪里呢？

我们都知道用后台写分页是件麻烦事，layPage正是解决了这些繁琐的操作。那么分页的任务就让我们交给layPage吧。

根据贤心作者的demo，让咱们耍耍吧。

首先官方下载layPage ，由于layPage功能已经比较完善 估计以后很少更新了。

解压layPage 把laypage文件夹放到你的项目，只需要引入js就够了。

官方Demo：

我根据这个demo使用了ajax加载 ，随便改了改就可以了。

页面东西太多 我只贴上相关的

是不是发现并没有写了多少东西 也就十多行的代码 这样 分页就已经实现了。

文档还没研究过，不过这足以证明layPage的强大了

layUI 里有这个社区的模版 可以下载下来自己没事改造改造。

首先官方下载layPage ，由于layPage功能已经比较完善估计以后很少更新了。

我根据这个demo使用了ajax加载，随便改了改就可以了。

页面东西太多我只贴上相关的

是不是发现并没有写了多少东西也就十多行的代码这样分页就已经实现了。

layUI 里有这个社区的模版可以下载下来自己没事改造改造。