layui 数据表格的搜索分页功能的实现

最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试验过的,并且已经实现过了。
代码如下:

其中需要加载的插件请自行加载,此处需要加载的是 table(表格)组件和form(表单)组件
js代码

/**
     * 页面的数据渲染
     */
table.render({
        elem:"#bizList"
        , id: 'bizList'
        , method: 'get'
        , url: biz_url // 获取数据的url链接
        , headers: {
            type: 'list', // 这是自己用来做判断的,根据自己的需求进行添加
            isAjax: 'ajax'
        }
        , page: ({
            layout:['prev', 'page', 'next', 'count']
            , first: '首页'
            , last: '尾页'
            , curr: 1
            , groups: 6
        })
        , cols:[[
            {title: '商户名称', field: 'biz_name', fixed: 'left'}
            , {title: '商户分类', field: 'category'}
            , {title: '联系地址', field: 'address'}
            , {title: '联系电话', field: 'tel'}
            , {title: '联系人', field: 'truename'}
            , {title: '用户名', field: 'username'}
            , {title: '操作', toolbar: "#operation", fixed: 'right'}
        ]]
        , limit: 40
        , event: true
    });
/**
     * 表格的搜索功能
     * 需要使用到数据表格的重载功能
     */
    form.on('submit(searche_btn)', function (data) {
        /**
         * 数据表格的重载功能
         */
        table.reload('bizList', {
            method: 'get'
            , where: {
                biz_name: data.field['biz_name'] // 添加查询的参数
            }
            , page: {
                curr: 1 // 重载后从第一页开始
            }
        });
        return false;  // 阻止submit的表单提交
    });

这是form表单的html代码以及table表格的html代码

<form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="biz_name" required lay-verify="required" placeholder="请输入商户名称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" id="search" lay-submit lay-filter="searche_btn">搜索</button>
        </div>
    </form>
    <table id="bizList" lay-filter="bizList" data-url="{{ url('biz/list') }}">
    	<!-- 这是动态生成操作按钮的模板,根据需要自行更改 --> 
        <script id="operation" type="text/html">
            <div class="layui-btn-container">
                <button lay-event="info" class="layui-btn">查看详情</button>
                @{{# if(d.enabled === 1) { }} // 这是layui的laytpl模板的使用方法
                <button lay-event="enabled" class="layui-btn layui-bg-red">禁用</button>
                @{{# } }}
                @{{# if(d.enabled === 0){ }}
                <button lay-event="enable" class="layui-btn">启用</button>
                @{{# } }}
            </div>
        </script>
    </table>

在此处如果又遇到什么问题,欢迎大家已进行讨论。
上面的代码,只是实现了搜索+分页的功能,如需其他的功能需要自行寻找其他的思路。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值