layui.table表格重载（表格搜索）

同样，由于官方文档比较笼统，还是做一些layui的探索。本次内容为layui.table重载。

引入问题：

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

表格重载：

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

重载案例：搜索

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

重载实现：

前端

    
        
            
                搜索性别：                
                                                                请选择性别                        男                        女                                    
                搜索            
        
    

这里采用下拉菜单来获取搜索信息，也可以使用输入框，在重载中进行相应的修改即可。
说明：
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，否则无法重载（血汗debug经验！），其余情况类推。同样可以使用按钮直接监控点击进行重载

后端：

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;

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

来源地址：https://blog.csdn.net/Rocky1719/article/details/129724312