TP5 自帶分頁搜尋功能實現
阿新 • • 發佈:2018-11-22
HTML部分:
<form class="layui-form" > <div class="layui-form-item"> <label class="layui-form-label">搜尋:</label> <div class="layui-input-inline"> <select name="search_key" id="sk"> <option value="room_name" selected="">按群名稱搜尋</option> <option value="room_id">按群號碼搜尋</option> </select> </div> <div class="layui-inline"> <input class="layui-input" name="search_val" id="sv" required autocomplete="off"> </div> <input type="button" class="layui-btn" id="search" value="搜尋" > <!--data-type="reload" --> <span id="fzk"></span> </div> </form>
ajax提交
JS部分:
//搜尋 $("#search").click(function(){ if($("#sv").val().trim() == ''){ layer.alert("搜尋條件不能為空"); return false; } $.get( "{:url('index/rooms_chat')}", {k:$("#sk").val(),v:$("#sv").val()}, function(d){ // console.log(d); if(d == "暫無資料"){ $("#roomList").html("暫無資料"); }else{ $('html').html(d); } } ); });
PHP 方法:
public function rooms_chat(Request $request){ //獲取所有的群組 if(null != $request->get('v')){ //帶搜尋條件的頁面 $k = $request->get('k'); $v = $request->get('v'); $rooms = Db::name('room') ->field("room_id,room_name ,r_id ") ->order('r_id','desc') ->where($k,'like',"%".$v."%") ->paginate(3,false,['query'=>$request->param()]); if($rooms->isEmpty()){ return view('rooms_chat',['rooms'=>"暫無資料"]); } return view('rooms_chat',['rooms'=>$rooms,'page'=>$rooms]); }else{ //預設開啟頁面 $rooms = Db::name('room') ->field("`room_id`,`room_name` ,r_id ") ->paginate(3); return view('rooms_chat',['rooms'=>$rooms,'page'=>$rooms]); } }
確保搜尋條件分頁條件都不會遺漏的關鍵: paginate(3,false,['query'=>$request->param()]);
還有分頁的CSS樣式:
/*分頁樣式*/
.pagination{text-align:center;margin-top:20px;margin-bottom: 20px;}
.pagination li{margin:0px 10px; border:1px solid #e6e6e6;padding: 3px 8px;display: inline-block;}
.pagination .active{background-color: #009688;;color: #fff;}
.pagination .disabled{color:#aaa;}
自己馬克一下...