丶红丝错千重
侠客
侠客
  • 最后登录2021-09-26
  • 发帖数10
阅读:4504回复:0

[ui框架]layui分页

楼主#
更多 发布于:2020-03-17 16:30
今天修改前同事留下的一个项目,他是玩后台的,让他来修改前端代码,没说话就自己写了一个分页,但是后期我们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="&quot; + className + &quot;"><input type="number" hidden="hidden" value="&quot; + (nowPage <= 1 ? 1 : (nowPage - 1)) + &quot;" /><a aria-label="Previous"><div class="icon-left" aria-hidden="true"></div></a></li>");
        //判断添加首页和中间省略号
        if(nowPage >= 4 && pageCount > 5) {
                selecter.append("<li class="&quot; + className + &quot;"><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="&quot; + className + &quot; &quot; + selectClass + &quot;"><input type="number" hidden="hidden" value="&quot; + i + &quot;" /><a>" + i + "</a></li>")
                } else {

                        //当前页位于头部前两个时
                        if(nowPage < 3 && i <= 5) {
                                //添加内容
                                selecter.append("<li class="&quot; + className + &quot; &quot; + selectClass + &quot;"><input type="number" hidden="hidden" value="&quot; + i + &quot;" /><a>" + i + "</a></li>")
                        }
                        //当当前页标位于中间时添加的样式
                        if(i >= nowPage - 2 && i <= nowPage + 2 && nowPage > 2 && nowPage <= pageCount - 2) {
                                //添加内容
                                selecter.append("<li class="&quot; + className + &quot; &quot; + selectClass + &quot;"><input type="number" hidden="hidden" value="&quot; + i + &quot;" /><a>" + i + "</a></li>")
                        }
                        //位于后最后两个
                        if(nowPage > pageCount - 2 && pageCount > 5 && i > pageCount - 5) {
                                //添加内容
                                selecter.append("<li class="&quot; + className + &quot; &quot; + selectClass + &quot;"><input type="number" hidden="hidden" value="&quot; + i + &quot;" /><a>" + i + "</a></li>")
                        }
                }
        }
        //判断添加尾页和中间省略号
        if(nowPage < pageCount - 2 && pageCount > 5) {
                selecter.append("<li class=""><a>···</a></li>");
                selecter.append("<li class="&quot; + className + &quot;"><input type="number" hidden="hidden" value="&quot; + pageCount + &quot;" /><a>尾</a></li>");
        }
        //下一页
        selecter.append("<li class="&quot; + className + &quot;"><input type="number" hidden="hidden" value="&quot; + (nowPage >= pageCount ? pageCount : (nowPage + 1)) + &quot;" /><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/
游客


返回顶部

公众号

公众号