Yii2框架layui 数据表格+搜索

一、效果图

二、代码

1、html

1.1、搜索框

<div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">企业名称</label>
            <div class="layui-input-inline">
                <input type="text" name="searchContent" id="companyName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" style="margin-top: -6px;" id="searchCompany" data-type="reload">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </div>
</div>

1.2、数据表格

<div class="layui-card-body" style="padding: 15px;">
    <table class="layui-hide" id="companyTable" lay-filter="companyTable" style="padding: 5px;"></table>
</div>

2、js部分

layui.use(['layer', 'laypage', 'table'], function () {
    var layer = layui.layer //弹层
        , laypage = layui.laypage //分页
        , table = layui.table; //表格
    var total = "<?= $count?>";
    //执行一个 table 实例
    table.render({
        elem: '#companyTable'
        , height: 420
        , url: '/company/getcompanylist' //数据接口
        , title: '企业列表'
        , page: {
            layout: ['count', 'prev', 'page', 'next', 'skip', 'limit'] //自定义分页布局
            , limit: 10
            , count: total
            , groups: 1 //只显示 1 个连续页码
            , first: false //不显示首页
            , last: false //不显示尾页
        }
        , toolbar: '#toolbar'
        , cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
            , {field: 'name', title: '企业名称', width: 150}
            , {field: 'status', title: '企业状态', width: 100}
            , {field: 'leader', title: '法人', width: 100}
            , {field: 'mobile', title: '联系电话', width: 130}
            , {field: 'start', title: '合作开始时间', width: 100}
            , {field: 'end', title: '合作结束时间', width: 100}
            , {field: 'address', title: '店铺地址', width: 210}
            , {fixed: 'right', title: '操作', toolbar: '#oprateBar', width: 120}
        ]]
    });

    //搜索加载--数据表格重载
    var active = {
        reload: function () {
            var searchContent = $("#companyName").val();//搜索框内容
            //执行重载
            table.reload('companyTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    searchContent: searchContent//作为参数传递给后端php
                }
            });
        }
    };

    $('#searchCompany').on('click', function () {
        var type = $(this).data('type');//自定义type属性，这里即为reload
        active[type] ? active[type].call(this) : ''; //如果存在active[type]，则调用改函数
    });
});

3、php

public function actionGetcompanylist($limit, $searchContent = '') {
    $model = new Company();
    $total = $model->getCount();//总共有多少数据
    $pager = new Pagination(['totalCount' => $total,'pageSize'=>$limit]);//分页
    $items = $model->getCompanyList($pager, $searchContent);
    $data = array('code'=>0, 'msg'=> '', 'count'=>$total, 'data'=>$items);
    CustomHelper::RetrunJson($data);//自定义返回函数，
}

三、我踩的坑

这边js的table.render里不能添加where条件查询，否则会和table.reload里的where冲突，导致table.reload里的where条件查询不生效。