使用layui中的laypage遇到的各种问题总结

来源：互联网发布：淘宝怎么抢购秒杀编辑：程序博客网时间：2024/05/21 11:26

用laypage写分页，使用该插件过程中，遇到的大小问题进行自我总结

首先，这里是官网的案例，点击打开链接官网

<!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'  });    //自定义首页、尾页、上一页、下一页文本  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"";

阅读全文

0 0