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

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

  • 以前的layui表格分页查询:
            搜索
            
            //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 = "" +
                                        "       
\n" + " \n" + "
\n" + "
" +item.address+ "
\n" + "
\n" + "
" +item.street+ "
\n" + "
" +item.houseType+ "
\n" + "
" +item.pubtime+ "
\n" + "
\n" + "
" +item.price+ "
\n" + "
元/月
\n" + "
\n" + "
" + "
" 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); } }); }
  1. searchByQuarters和searchByQuartersText是搜索按钮和搜索输入框得类名。
  2. 可以看到我将分页封装成一个可传入条件的方法,然后通过调用该方法实现自定义页面的分页条件查询。
  3. 当然,该方法可以设置多个参数,只需要在ajax请求时在data里面把相应的参数跟上传到后台即可。

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

`

时间不早了,睡了睡了。晚安!

你可能感兴趣的:(前端技术,实用性笔记,layui,自定义页面的分页条件查询,laypage)