一、效果图
二、代码
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条件查询不生效。