LayUI数据表格查询与重载

查询功能模块的工作流程是:

  1. 在输入框中输入关键字,点击查询按钮,数据传输到服务端。
  2. 服务端接收到数据,进行查询后将数据拼接成前端框架所需要的json类型。
  3. 服务端返回查询结果,前端数据表格方法级渲染的重载。
  4. 如果未输入数据点击查询按钮,弹窗提示用户输入数据。

前端数据展示与重载

编写输入框与查询按钮,监听按钮点击事件。

<div class="layui-inline layui-show-xs-block">
                            <input type="text" name="userName" id="userName" placeholder="请输入姓名/昵称" autocomplete="off"
                                   required="required"
                                   class="layui-input"></div>
<script>
      //点击搜索按钮根据用户名称查询
        $('#selectbyCondition').on('click',
            function () {
                if ($('#userName').val() == '') {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            title: '提示消息'
                            ,content: '查询条件不能为空!'
                        });

                    });
                } else {
                    //根据条件查询表格数据重新加载
                    table.reload('userTableReload', {
                        url: 'search.php',
                        where: { //设定异步数据接口的额外参数,任意设
                            userName: $('#userName').val()
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
</script>

PHP服务端查询功能

后端程序以POST方式从前端接收查询关键字的值,进行数据查询并且将查询数据拼装成为前端框架所需要的json字段,实现代码如下所示。

<?php
header("content-type:text/html;charset=utf-8;");
require ('db_config.php');
$userName = $_POST['userName'];

$sql = "select id,time,object,name,message, case gender when 1 then '男' when 0 then '女' end as gender from donation order by id desc where donor like '%".$userName."%'";
$result = $mysqli->query($sql);
$arr = array();
while ($row = mysqli_fetch_array($result)) { 
    $arr[] = $row;
}
$donation_data = array(
    'code'=>0,
    'msg'=>'',
    'count'=>$count,
    'data'=>$arr
);
echo json_encode($donation_data);
//echo $sql;
?>

实现效果

在查询不到的情况下,显示“无数据”。
在这里插入图片描述

在可以查询到数据的情况下显示查询到的数据。
在这里插入图片描述

MySQL查询数据处理

数据库中以1和0分别代表性别“男”和“女”,在查询输出显示时需要以用户能看懂的中文“男”和“女”显示,所以,需要将代码稍加改进,改进后的代码如下。

select id,time,object,name,message, case gender when 1 then '男' when 0 then '女' end as gender from donation order by id desc where donor like '%".$userName."%'

相关文章:《PHP+MySQL+LayUI分页查询显示》|《PHP语言实现网站登录功能》|《PHP实现退出登录功能》


作者:戴翔
电子邮箱:daixiangcn@outlook.com
微信开发者主页:Null
简介:中国公民,CSDN博客专家,秦淮区疾控中心托管社会公益组织指南针工作室志愿者,创业公司研发中心负责人,在校大学生。第二届大学生微信小程序应用开发大赛全国三等奖项目第一作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目总工程师。


daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页