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實現退出登錄功能》

---

作者：戴翔
電子郵箱：[email protected]
微信開發者主頁：Null
簡介：中國公民，CSDN博客專家，秦淮區疾控中心託管社會公益組織指南針工作室志願者，創業公司研發中心負責人，在校大學生。第二屆大學生微信小程序應用開發大賽全國三等獎項目第一作者，微信小程序《約車嗎》、《慶雲慈善會》、《鋒雲速檢》項目總工程師。

---