使用layui中的laypage遇到的各种问题总结
2017-08-24 16:44
441 查看
用laypage写分页，使用该插件过程中，遇到的大小问题进行自我总结
首先，这里是官网的案例， 点击打开链接官网
现在，进行自我总结
1，使用该插件之前，我用的一直是layui-v1.0.2版本，这里我给自己挖了一个很大的坑，这次项目中写分页的时候，本人直接引用的该版本，然后，上官网查看其具体参数的用法，就使用了laypage.render()，这个是需要使用layui-v2.0.2版本才能使用的，在这就一直提示该函数错误，所有，请有需要的小伙伴们注意了，其官网上有新旧版本之分，这个只要自己细心点，应该就不会像我一样吧，是我蠢了
2，我最后也没有用新版本，还是用的旧版本（因为项目里面都写完了的，后来只让改了一点），旧版本里，我当时找不到让其显示完整的分页，所以才上官网找的，发现新版本，也看了下，还是放弃了，主要是我的数据什么的都已经链接ok了，要写完整分页，只得自己添加了，这是我的完整分页
html页面里：
js里面（引用的laypage）：
额，记性不好，忘记了一点，官网上是默认如果你的分页数据只有一条，那么，分页就不会显示，这里怎么解决呢，我度娘找了好久，只要将引用的插件里的目录下 layui/lay/modulles/laypages.js里的t.pages<=1)return"";改成t.pages<=0)return"";
首先，这里是官网的案例， 点击打开链接官网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui-v2.0.2/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>总页数低于页码总数</legend>
</fieldset>
<div id="demo0"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>总页数大于页码总数</legend>
</fieldset>
<div id="demo1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义主题 - 颜色随意定义</legend>
</fieldset>
<div id="demo2"></div>
<div id="demo2-1"></div>
<div id="demo2-2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义首页、尾页、上一页、下一页文本</legend>
</fieldset>
<div id="demo3"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>不显示首页尾页</legend>
</fieldset>
<div id="demo4"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>开启HASH</legend>
</fieldset>
<div id="demo5"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>只显示上一页、下一页</legend>
</fieldset>
<div id="demo6"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo7"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义排版</legend>
</fieldset>
<div id="demo8"></div>
<div id="demo9"></div>
<div id="demo10"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义每页条数的选择项</legend>
</fieldset>
<div id="demo11"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>将一段已知数组分页展示</legend>
</fieldset>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="layui-v2.0.2/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//总页数低于页码总数
laypage.render({
elem: 'demo0'
,count: 50 //数据总数
});
//总页数大于页码总数
laypage.render({
elem: 'demo1'
,count: 70 //数据总数
,jump: function(obj){
console.log(obj)
}
});
//自定义样式
laypage.render({
elem: 'demo2'
,count: 100
,theme: '#1E9FFF'
});
laypage.render({
elem: 'demo2-1'
,count: 100
,theme: '#FF5722'
});
laypage.render({
elem: 'demo2-2'
,count: 100
,theme: '#FFB800'
});
//自定义首页、尾页、上一页、下
4000
一页文本
laypage.render({
elem: 'demo3'
,count: 100
,first: '首页'
,last: '尾页'
,prev: '<em>←</em>'
,next: '<em>→</em>'
});
//不显示首页尾页
laypage.render({
elem: 'demo4'
,count: 100
,first: false
,last: false
});
//开启HASH
laypage.render({
elem: 'demo5'
,count: 500
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值
});
//只显示上一页、下一页
laypage.render({
elem: 'demo6'
,count: 50
,layout: ['prev', 'next']
,jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +' 页');
}
}
});
//完整功能
laypage.render({
elem: 'demo7'
,count: 100
,layout: ['prev', 'page', 'next', 'skip','limit','count'] //这里面的顺序可以调换，我这里顺序调换过了
,jump: function(obj){
console.log(obj)
}
});
//自定义排版
laypage.render({
elem: 'demo8'
,count: 1000
,layout: ['limit', 'prev', 'page', 'next']
});
laypage.render({
elem: 'demo9'
,count: 1000
,layout: ['prev', 'next', 'page']
});
laypage.render({
elem: 'demo10'
,count: 1000
,layout: ['page', 'count']
});
//自定义每页条数的选择项
laypage.render({
elem: 'demo11'
,count: 1000
,limit: 100
,limits: [100, 300, 500]
});
//将一段数组分页展示
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
//调用分页
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>');
});
return arr.join('');
}();
}
});
});
</script>
</body>
</html>现在，进行自我总结
1，使用该插件之前，我用的一直是layui-v1.0.2版本，这里我给自己挖了一个很大的坑，这次项目中写分页的时候，本人直接引用的该版本，然后，上官网查看其具体参数的用法，就使用了laypage.render()，这个是需要使用layui-v2.0.2版本才能使用的，在这就一直提示该函数错误，所有，请有需要的小伙伴们注意了，其官网上有新旧版本之分，这个只要自己细心点，应该就不会像我一样吧，是我蠢了
2，我最后也没有用新版本，还是用的旧版本（因为项目里面都写完了的，后来只让改了一点），旧版本里，我当时找不到让其显示完整的分页，所以才上官网找的，发现新版本，也看了下，还是放弃了，主要是我的数据什么的都已经链接ok了，要写完整分页，只得自己添加了，这是我的完整分页
html页面里：
<div class="page_box"> <div id="sz_page_box"></div>//引用的laypage放在里面的，但是只有前面一部分（没有每页显示以及总记录数） <div id="sz_page_info">//自己写的div用来装每页显示数以及总数 <span class="everypage">每页显示 <select class="sel"> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> </select> </span> <span class="allnum">共<span id="all_number_sz"></span>条记录数</span> </div>
</div>
js里面（引用的laypage）：
function pageDivision() {
layui.use(['laypage','layer'],function () {
var laypage = layui.laypage,layer = layui.layer;
laypage({
cont:'sz_page_box',//装分页的盒子，是id，不用加#
pages:pageCount,
groups:2,
skin:'#1E9FFF',
skip:true,
jump:function (obj,first) {
var curr = obj.curr;//获取当前点击页码
pageIndex = curr;
pageload_sz();
}
})
})
}这是最后的效果，主要是我这里数据只有7条，不能很好的展示，而且需要切换获取显示什么的，这里就不详细说了，肿么感觉被自己坑了好多，我TM纠结了一早上，现在总结，竟然没有了，，这个主要是为了让我自己谨记，以后写一定用新版，不过大神们都可以自己直接写了
额，记性不好，忘记了一点，官网上是默认如果你的分页数据只有一条，那么，分页就不会显示，这里怎么解决呢，我度娘找了好久，只要将引用的插件里的目录下 layui/lay/modulles/laypages.js里的t.pages<=1)return"";改成t.pages<=0)return"";
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用mybatis分页插件PageHelper5.0.0遇到的问题总结
- 使用mybatis分页插件PageHelper5.0.0遇到的问题总结
- 使用Entity Framework时遇到的各种问题总结
- 使用mybatis分页插件PageHelper5.0.0遇到的问题总结
- 使用Entity Framework时遇到的各种问题总结
- 使用Entity Framework时遇到的各种问题总结
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题
- [项目过程中所遇到的各种问题记录]ORM篇——使用NHibernate配置对象实体的一些小问题
- 使用Pluto+Tomcat 开发遇到的问题和总结 (1)
- 使用oracle中遇到的各种问题【持续更新】
- Sql常见问题总结二（Sql语句怎么样查询IP，游标去重复，各种函数使用，各种取时间格式，字符串精确排序，超时锁问题）
- [项目过程中所遇到的各种问题记录]ORM篇——使用NHibernate配置对象实体的一些小问题 22
- [开发总结]WebView使用中遇到的一些问题&解决
- 2011.11.12使用MDK遇到的问题总结
- [项目过程中所遇到的各种问题记录]学习篇——对工作以来的学习过的开源项目进行总结—动软代码生成工具
- 2009-08-08:一周工作总结---在使用串口通信时遇到的几个问题
- 使用table control时遇到的问题总结
- [项目过程中所遇到的各种问题记录]学习篇——对工作以来的学习过的开源项目进行总结—DiscuzNt
- 在使用Struts的过程中也遇到了一些问题，现在总结一下