layui.table表格搜索重载

时间：2024-08-28

引入问题：
传统web更新页面用页面跳转的方式，现多用局部元素重载，提高用户体验。Ajax技术就是为了实现此功能而诞生的。layui框架在table模块中提供了类似的功能，为避免二次渲染，同时体验一下框架开发者的良苦用心，对layui.table重载进行探索。

表格重载：
layui官方提供了数据表格reload函数，其本质是向后端发送数据请求，接收后端数据后重载表格。按照此思路，利用Ajax技术同样可以达到相同效果，实现步骤相对复杂（大家可以尝试实现来讨论）。

重载案例：搜索

对表格中的性别列进行搜素，效果如下：

前端代码：

<div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
        <div class="demoTable">
            <div class="layui-form">
                搜索性别：
                <div class="layui-inline">
                    <!--        <input class="layui-input" name="id" id="sex" autocomplete="off">-->
                    <select  id="sex" name="department" lay-verify="required" >
                        <option value="">请选择性别</option>
                        <option value="m">男</option>
                        <option value="f">女</option>
                    </select>
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
    </div>
</div>
<table id="demo"  class="layui-table" lay-filter="test"></table>
<script>
 layui.use(['table','jquery'],function(){
        var table =layui.table;
        url1 = 'test_table_data.php';
		//渲染
		table.render({
            elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            ,data: <?php echo json_encode($data)?>//url1
            ,id: 'test_table'
            ,cols: [[ {field: 'id', title: 'ID'},
                {field: 'real_name', title: 'Name'},
                {field: 'sex', title: 'Sex'},
                {field: 'birthday', title: 'Birthday'}
            ]]//设置表头
            ,even: true //开启隔行背景
            //,…… //更多参数参考右侧目录：基本参数选项
            ,parseData:function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res //解析数据列表
                };
            }
        });
        //按照部门搜索，table数据重载
        var url2 = 'test_table_reload.php';
        var $ = layui.$, active = {
            reload: function () {
                var sex = $('#sex');
                table.reload('test_table', {
                    url: url2,
                    method: 'post',
                    where: { //设定异步数据接口的额外参数，任意设
                        sex: sex.val()
                        // key: {
                        //     // id: demoReload.val(),
                        //
                        // }
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            }
        }

        $('.layui-form .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
</script>

这里采用下拉菜单来获取搜索信息，也可以使用输入框，在重载中进行相应的修改即可。
说明：
1、渲染部分参考方法渲染
2、表格渲染数据采用url异步数据接口或者data来显示数据均可采用此方式进行表格重载；
3、可以采用method参数对传参方式进行定义；
4、where可理解为需要传递到后台的参数，案例中sex为传递参数名，sex.val()为传递参数值。

Tips：
1、像案例中采用获取鼠标单击事件实现搜索，对button元素的事件监视函数的编写很重要，官方文档中没有给出，在示例代码中有所体现。
2、 $('.layui-form .layui-btn').on('click', function(){中'.layui-form .layui-btn'语法非常严格。此案例中，.layui-form后必须有且仅有1个Space，否则无法重载，其余情况类推。同样可以使用按钮直接监控点击进行重载

后端代码：

<?php
include "../connectDB.php";

$sex = $_POST['sex'];

$sql = "select * from testtable1";
$result = mysqli_query($conn,$sql);
$data = array();

while ($row = mysqli_fetch_assoc($result)) {
    if($row['sex']==$sex){
        $data[] = $row;
    }
}
$json_data = json_encode($data);
echo $json_data;

正常接收传递的参数，根据需要进行处理后返回。

上一篇：解决layer.msg与parent关闭或者刷新冲突的问题 下一篇：没有了

layui.table表格搜索重载

相关文章