搜索页 · TP5常用代码

LayUI搜索页 [TOC] ## 一、实现搜索功能 ### 1、HTML结构 ~~~ <div class="layui-form-item" style="margin-top: 10px;"> <div class="layui-input-inline"> <input type="text" class="layui-input" value="{$data.wd}" id="wd" placeholder="请输入影片标题搜索"> </div> <button class="layui-btn layui-btn-primary" onclick="searchs()"><i class="layui-icon"></i>搜索</button> </div> ~~~ ### 2、功能实现 ~~~ <script type="text/javascript"> function searchs(curpage){ var wd = $.trim($('#wd').val()); window.location.href = "/admins.php/admins/video/index?wd="+wd; } </script> ~~~ ### 3、后台处理影片列表 ~~~ public function index(){ $data['pageSize'] = 15; $data['page'] = max(1,(int)input('get.page')); $data['data'] = $this->db->table('video')->where($where)->order('id desc')->pages($data['pageSize']); $this->assign('data',$data); return $this->fetch(); } ~~~ ## 二、优化搜索（分页搜索）优化：整合搜索和分页功能 ### 1、思路分析点击分页按钮，在跳转时，执行searchs();在搜索searchs()中实现页面的跳转 ### 2、HTML部分 ~~~ <div class="layui-form-item" style="margin-top: 10px;"> <div class="layui-input-inline"> <input type="text" class="layui-input" value="{$data.wd}" id="wd" placeholder="请输入影片标题搜索"> </div> <button class="layui-btn layui-btn-primary" onclick="searchs()"><i class="layui-icon"></i>搜索</button> </div> ~~~ ### 3、功能实现 ~~~ <script type="text/javascript"> layui.use(['layer','laypage'],function(){ layer = layui.layer; $ = layui.jquery; laypage = layui.laypage; laypage.render({ elem: 'pages' ,count:{$data.data.total} ,limit:{$data.pageSize} ,curr:{$data.page} ,jump: function(obj, first){ if(!first){ searchs(obj.curr); } } }); }); // 搜索 function searchs(curpage){ var wd = $.trim($('#wd').val()); var url = "/admins.php/admins/video/index?page="+curpage; if(wd){ url += '&wd='+wd; } window.location.href = url; } </script> ~~~ ### 4、后台处理影片列表 ~~~ public function index(){ $data['pageSize'] = 15; $data['page'] = max(1,(int)input('get.page')); $data['wd'] = trim(input('get.wd')); $where = array(); $data['wd'] && $where = 'title like "%'.$data['wd'].'%"'; $data['data'] = $this->db->table('video')->where($where)->order('id desc')->pages($data['pageSize']); $this->assign('data',$data); return $this->fetch(); } ~~~