layui 数据表格实现关键字搜索

参考：https://blog.csdn.net/weixin_41606652/article/details/84204334

html部分：

<div class="demoTable" style="margin-top:10px;">搜索：<div class="layui-inline"><input class="layui-input" id="demoReload" name="title" placeholder="请输入标题"  autocomplete="off"></div><button class="layui-btn searchBtn" data-type="reload">搜索</button>
</div>

js部分：

//搜索功能实现var $ = layui.$, active = {reload: function(){var demoReload = $('#demoReload');console.log("demoReload.val:" + demoReload.val());//执行重载table.reload('testReload', {//url:'/index.php/Admin/Page/selectByPage',//method:'get',page: {curr: 1 //重新从第 1 页开始},where: {page_name: demoReload.val()  //搜索关键词}}, 'data');}};//执行关键字搜索的函数$('.demoTable .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});

php后台：

// 获取单页信息信息public function selectByPage() {header('content-type:application/json');$page_name = $_GET["page_name"]!='' ? $_GET["page_name"] : '';        $page = $_GET["page"]!='' ? $_GET["page"] : 1;      $limit = $_GET["limit"]!='' ? $_GET["limit"] : 10;$mode = M("page"); // 实例化对象        $where = "page_name like '%".$page_name."%'";$list = $mode->where($where)->order('create_time desc')->limit((($page-1)*$limit).','.$limit)->select();   $count = $mode->count(); //总记录数     $obj->code = 0;$obj->msg = 'OK';$obj->data  = $list;$obj->count = $count;echo json_encode($obj);}

layui 数据表格实现关键字搜索相关推荐

php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui数据表格中包含图片的处理方式
layui数据表格中包含图片时,图片可能显示不全. 搜索后网上的解决方法: <style>.layui-table-cell {height: 100%;max-width: 100%;} ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...

layui 数据表格实现关键字搜索

layui 数据表格实现关键字搜索相关推荐

最新文章

热门文章