搜索頁 · 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(); } ~~~