layui.table表格搜索重载

2024-08-28前端开发
223

引入问题:
传统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;
正常接收传递的参数,根据需要进行处理后返回。
 
The End
layui table重载

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112

layui.open属性打开一个弹出层
核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类 类型:Number,默认:0 layer提供了5...
2025-02-25 前端开发
82