ThinkPHP6+Layui实现搜索分页

2020-08-26    分类:后端    标签:TP6    阅读:253   


效果:

222.png

基于ThinkPHP6+Layui实现多条件搜索分页方法:

步骤1、HTML代码:

        <fieldset>
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div>
                        <div>
                            <label>账号</label>
                            <div>
                                <input type="text" name="admin_name" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <label>用户姓名</label>
                            <div>
                                <input type="text" name="admin_realname" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <label>日期选择</label>
                            <div>
                                <input type="text" name="created_at" id="date1" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

步骤2、JavaScript代码:

<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table
            , laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date1'
        });
 
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });
 
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');
 
            return false;
        });
    });
</script>

步骤3、后端代码:用户接收数据和处理

<?php
declare (strict_types = 1);

namespace app\union\controller;

use app\Request;
use think\facade\View;
use app\union\model\Adminlist;

class Admin{
    public function getAdminlist(Request $request){
       //获取每页显示的条数
       $limit= $request->param('limit');
       //获取当前页数
       $page= $request->param('page');
       $where=[];
       // $where = '1=1';
       if(!empty($request->param('searchParams'))){
              $searchParams=json_decode($request->param('searchParams'),true);
              if(!empty($searchParams['admin_name'])){
                     $where[] = array('admin_name', 'like', $searchParams['admin_name'].'%');
              }
              if(!empty($searchParams['admin_realname'])){
                     $where[] = array('admin_realname', 'like', $searchParams['admin_realname']);
              }
              if(!empty($searchParams['created_at'])){
                     $where[] = array('created_at', '=', strtotime($searchParams['created_at']));
              }
       }
       $admin_list=Adminlist::where($where)
              ->order('id', 'desc')
              ->paginate($limit,false,['page'=>$page])
       ->toArray();
 
       return json(['code'=>200,'msg'=>'','count'=>$admin_list['total'],'data'=>$admin_list['data']]);
 
    }
}
?>


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元 618年中云钜惠大促,精选云产品1折起,助力新基建,618年中大促云服务器88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/398.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×