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字段，实现代码如下所示。

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实现退出登录功能》

---

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

---