使用Layui实现自定义样式下的条件分页

看懂此文需要一定的layui基础，用了layui也有一年多了，因为工作的原因，前端代码很少写，以前经常是用layui做后台管理系统，所以分页都是用Layui封装好的表格。分页查询也很快捷。

• 以前的layui表格分页查询：

            <a class="layui-btn search_btn" data-type="reload">搜索</a>
            
            //js代码
			var tableIns = table.render({
               ······
               ······
               ······
            });
		    //搜索, 条件查询
            $(".search_btn").on("click", function() {
                tableIns.reload({
                    page : {
                        curr : 1
                    },
                    where : {
                    	//搜索的关键字 
                        username : encodeURI($(".searchName").val())
                    }
                });
            });

• 很明显直接将表格reload再以键值对形式跟上where条件可以了

---

但是现在问题来了，在毕业设计中我想尝试用layui做前台系统面向用户而不是管理员了，做自定义样式的页面分页，且能够跟上一个或多个条件，来怎么处理呢？

1. 我阅读了layui文档中的laypage。
2. 经过反复思考得出以下代码：

    //设置网页打开时的默认加载
    queryByCondition(null);

    //监听按钮
     $(".searchByQuarters").on("click", function() {
         queryByCondition(encodeURI($(".searchByQuartersText").val()))
     });

    function queryByCondition(address)
    {
        $.ajax({
            url: "/houserent/front/list",
            //data: {page:currentPage, limit:limit},
            data: {
                address: address
            },
            dataType: "json",
            type: "get",
            //contentType : ‘application/json;charset=UTF-8‘,
            async: true,
            success: function (res) {
                if (res.code === 0) {
                    var houseInfoList =res.data;
                    //调用分页
                    laypage.render({
                        elem: 'ones',
                        count: res.data.length, //数据总数，从服务器得到
                        limit:10,
                        // layout:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        theme: '#0C0C0C',
                        jump: function(obj,first){
                            //模拟渲染
                            document.getElementById('list').innerHTML = function(){
                                var arr = [],
                                    thisData =houseInfoList.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                                layui.each(thisData, function(index, item){
                                    var str = "<a href='detail.html?houseId="+item.houseId+"' class='headerMobile'>" +
                                        "       <div class='item' style=\"margin: 2%;\">\n" +
                                        "            <img style=\"height: 200px;width: 300px\" src='images/front/houses/"+item.path+"'>\n" +
                                        "            <div style=\"font-size: 25px;padding-left: 150px;display:inline;\">\n" +
                                        "                <div class=\"head\" style=\"display:inline;\">" +item.address+ "</div>\n" +
                                        "            </div>\n" +
                                        "            <div style=\"margin-left: 2%;font-size: 15px;display: inline\">" +item.street+ "</div>\n" +
                                        "            <div style=\"margin-left: 2%;font-size: 15px;display: inline\">" +item.houseType+ "</div>\n" +
                                        "            <div style=\"margin-left: 2%;font-size: 15px;display: inline\">" +item.pubtime+ "</div>\n" +
                                        "            <div style=\"margin-top: 5%;font-size: 15px;display: inline;float: right\">\n" +
                                        "                <div class=\"price\" style=\"font-size: 45px;color: red;display: inline\">" +item.price+ "</div>\n" +
                                        "                <div style=\"display: inline;font-size: 20px\">元/月</div>\n" +
                                        "            </div>\n" +
                                        "        </div>" +
                                        "</a>"
                                    arr.push(str)
                                });
                                return arr.join('');
                            }();

                            //首次不执行
                            if(!first){
                                //可以做一些事情
                            }
                        }
                    });
                } else{
                    layer.msg(res.errmsg, function () {
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.error(XMLHttpRequest.status);
                console.error(XMLHttpRequest.readyState);
                console.error(textStatus);
            }
        });
    }

4. searchByQuarters和searchByQuartersText是搜索按钮和搜索输入框得类名。
5. 可以看到我将分页封装成一个可传入条件的方法，然后通过调用该方法实现自定义页面的分页条件查询。
6. 当然，该方法可以设置多个参数，只需要在ajax请求时在data里面把相应的参数跟上传到后台即可。

附上layui的laypage分页组件文档：https://www.layui.com/doc/modules/laypage.html#use

`

时间不早了，睡了睡了。晚安！