今天修改前同事留下的一个项目,他是玩后台的,让他来修改前端代码,没说话就自己写了一个分页,但是后期我们UI说样式差了点,让我们修改一下,本来这个我也不打算发帖的,但是一个小问题坑了我一把,所以丢人了,他的代码大致如下:
* 简单的分页部件 * @param {Object} nowPage 当前页 * @param {Object} pageSize 本页显示条数 * @param {Object} pageCount 总页数 * @param {Object} selecter 选择器(需要添加分页部件的容器<ul>) * @param {Object} className(分页按钮的class名 做点击事件用) */ function pageUtils(nowPage, pageSize, pageCount, selecter, className) { selecter.empty(); //判断是否只有一页 if(pageCount < 2) { //不到两页时不用分页 return; } //添加上一页 selecter.append("<li class="" + className + ""><input type="number" hidden="hidden" value="" + (nowPage <= 1 ? 1 : (nowPage - 1)) + "" /><a aria-label="Previous"><div class="icon-left" aria-hidden="true"></div></a></li>"); //判断添加首页和中间省略号 if(nowPage >= 4 && pageCount > 5) { selecter.append("<li class="" + className + ""><input type="number" hidden="hidden" value="1" /><a>首</a></li>") selecter.append("<li class=""><a>···</a></li>") } for(var i = 1; i <= pageCount; i++) { //添加当前页的选中样式 var selectClass = (nowPage == i ? "active" : ""); if(pageCount <= 5) { // selecter.append("<li class="" + className + " " + selectClass + ""><input type="number" hidden="hidden" value="" + i + "" /><a>" + i + "</a></li>") } else { //当前页位于头部前两个时 if(nowPage < 3 && i <= 5) { //添加内容 selecter.append("<li class="" + className + " " + selectClass + ""><input type="number" hidden="hidden" value="" + i + "" /><a>" + i + "</a></li>") } //当当前页标位于中间时添加的样式 if(i >= nowPage - 2 && i <= nowPage + 2 && nowPage > 2 && nowPage <= pageCount - 2) { //添加内容 selecter.append("<li class="" + className + " " + selectClass + ""><input type="number" hidden="hidden" value="" + i + "" /><a>" + i + "</a></li>") } //位于后最后两个 if(nowPage > pageCount - 2 && pageCount > 5 && i > pageCount - 5) { //添加内容 selecter.append("<li class="" + className + " " + selectClass + ""><input type="number" hidden="hidden" value="" + i + "" /><a>" + i + "</a></li>") } } } //判断添加尾页和中间省略号 if(nowPage < pageCount - 2 && pageCount > 5) { selecter.append("<li class=""><a>···</a></li>"); selecter.append("<li class="" + className + ""><input type="number" hidden="hidden" value="" + pageCount + "" /><a>尾</a></li>"); } //下一页 selecter.append("<li class="" + className + ""><input type="number" hidden="hidden" value="" + (nowPage >= pageCount ? pageCount : (nowPage + 1)) + "" /><a aria-label="Next"><div class="icon-rigth" aria-hidden="true"></div></a></li>"); } 我很懒,所以换了一个UI插件,layUI,花了几分钟把数据插入完事儿后,我发现用不了,检查了一下, 报laypage is not a function ,我觉得我那儿搞错了,去官网找了一下列子,全新的html,另一个能正常运行的 项目的layui插件(css和js)复制过来,报错,报错更离谱,假的吧,百度,百度,百度,过程就不说了。 结果,版本问题:一样的前端数据插入,一样的写法,从官网下载一个新的版本完美运行,wtf? 给一个运行后的代码,有需要可以用用 ,代码如下 layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage; var layer = layui.layer; var pageNo = 1; var pageSize = 10; $.ajax({ type:"get", url: 'xxx (你的地址)', dataType:"json", success:function (data) { laypage.render({ elem: 'productPage', //你绑定的div的ID。 count: data.total, // 总数 limit: pageSize, layout: ['count', 'prev', 'page', 'next', 'skip'], theme : '#0c62b0', // 修改选中时的颜色 jump: function (obj) { pageNo = obj.curr ; //会自动获取第几页 pageSize = obj.limit; //上面绑定的条数 $.ajax({ type:"get", url:'xxxxxxx-URL', async:false, dataType:"json", success : ( res )=>{ //console.log(res); //成功时候的函数,比如你的数据绑定 } }); } //点击的方法。 }); } }); }); 替换地址,加入想要的事件即可,注:需要引入layUI新的js,老版本有可能不支持,链接 https://www.layui.com/ |
|