1. 程式人生 > >TP5 自帶分頁搜尋功能實現

TP5 自帶分頁搜尋功能實現

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;}

自己馬克一下...