thinkphp layui 实现多条件搜索分页

admin

1.HTML搜索框代码

1. <div class="layui-form-item">
   
2.         <div class="layui-inline">
   
3.           <label class="layui-form-label">文章ID</label>
   
4.           <div class="layui-input-inline">
   
5.             <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
   
6.           </div>
   
7.         </div>
   
8.         <div class="layui-inline">
   
9.           <label class="layui-form-label">状态</label>
   
10.           <div class="layui-input-inline">
    
11.               <select name="status">
    
12.                 <option value="0" {if $status==0}selected{/if}>全部</option>
    
13.                 <option value="1" {if $status==1}selected{/if}>开启</option>
    
14.                 <option value="2" {if $status==2}selected{/if}>关闭</option>
    
15.               </select>
    
16.           </div>
    
17.         </div>
    
18.         <div class="layui-inline">
    
19.           <label class="layui-form-label">标题</label>
    
20.           <div class="layui-input-inline">
    
21.             <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
    
22.           </div>
    
23.         </div>
    
24.         <div class="layui-inline">
    
25.           <label class="layui-form-label">文章标签</label>
    
26.           <div class="layui-input-inline">
    
27.             <select name="type_id">
    
28.               <option value="">请选择标签</option>
    
29.               {foreach ($find as $find_v)}
    
30.               <option value="{$find_v['id']}">{$find_v['name']}</option>
    
31.               {/foreach}
    
32.             </select>
    
33.           </div>
    
34.         </div>
    
35.         <div class="layui-inline">
    
36.           <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
    
37.             <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
    
38.           </button>
    
39.         </div>
    
40.       </div>

复制代码

2 layui 代码

1. var $ = layui.jquery,
   
2.             table = layui.table,
   
3.              form = layui.form,
   
4.            laydate = layui.laydate;
   
5.     //监听搜索
   
6.     form.on('submit(LAY-app-contlist-search)', function(data){
   
7.       var field = JSON.stringify(data.field);
   
8.       //执行重载
   
9.       table.reload('LAY-app-content-list', {
   
10.         page:{
    
11.           curr:1
    
12.         },
    
13.         where:{
    
14.           searchParams:field
    
15.         }
    
16.     },'data');
    
17.       return false;
    
18.     });

复制代码

3 layui接口代码

1. //文章管理
   
2.   table.render({
   
3.     elem: '#LAY-app-content-list'
   
4.     ,id:'LAY-app-content-list'
   
5.     ,url: '/admin.php/article/lists' //模拟接口
   
6.     ,cols: [[
   
7.       {type: 'checkbox', fixed: 'left'}
   
8.       ,{field: 'id', width: 80, title: 'ID', sort: true}
   
9.       ,{field: 'level_id', title: '文章级别', minWidth: 80,templet:"#level_formatter"}
   
10.       ,{field: 'title', title: '文章标题'}
    
11.       ,{field: 'type_id', title: '文章分类', minWidth: 60,templet:"#zq_formatter"}
    
12.       ,{field: 'author_id', title: '作者',templet:"#profile_user"}
    
13.       ,{field: 'updates_time', title: '更新时间', sort: true,templet:"<div>{{layui.util.toDateString(d.updates_time*1000, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
    
14.       ,{field: 'status', title: '发布状态', templet: '#buttonTpl', minWidth: 80, align: 'center'}
    
15.       ,{title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
    
16.     ]]
    
17.     ,first:false/*不显示首页*/
    
18.     ,last:false//不显示尾页
    
19.     ,page: true
    
20.     ,limit: 10
    
21.     ,limits: [10, 15, 20, 25, 30]
    
22.     ,text: '对不起，加载出现异常！'
    
23.   });

复制代码