实现搜索和分页

   一般写搜索和分页这两个功能需要联合起来考虑，因为搜索以后也会点击下一页或者是上一页，同时也得把搜索的信息加上。

在做网站中，一般这两个功能是特别常见的功能，我们在做的时候也要考虑的全面。我提供的方法如下：

js先把各个事件添加上，这个例子还加上了导航也是后端返回的动态数据：

1 //搜索的函数
2 function search_record(){
3      var books_id = $("#hidden_booksid").val();  //导航编号
4       var search_info = $("#search_info").val();
5     if(search_info.indexOf(" ")>=0){
6         alert("输入不能有空格！");
7     }
8      window.location.href = "/search_record_temp?search_info="+search_info+"&books_id="+books_id; //把导航编号传下去确定查的是哪个导航下的信息
9 }

 1 //分页代码(第一页)
 2 function first_page(){
 3      var books_id = $("#hidden_booksid").val();
 4     var search_info = document.getElementById("hidden_searchinfo").value;
 5     window.location.href = "/first_page_temp?search_info="+search_info+"&books_id="+books_id;
 6 }
 7 //上一页
 8 function pre_page(){
 9      var books_id = $("#hidden_booksid").val();
10     var search_info = document.getElementById("hidden_searchinfo").value;
11     document.getElementById("prepage").className = "btn btn-sm btn-primary";
12     var current_page = document.getElementById("current_page").innerHTML;
13     // alert(current_page);
14     window.location.href = "/pre_page_temp?current_page="+current_page+"&search_info="+search_info+"&books_id="+books_id;
        //传当前页，后端减一即可
15 }
16 //下一页
17 function next_page(){
18      var books_id = $("#hidden_booksid").val();
19     var search_info = document.getElementById("hidden_searchinfo").value;
20        document.getElementById("nextpage").className = "btn btn-sm btn-primary";
21     var current_page = document.getElementById("current_page").innerHTML;
22     //alert(current_page);
23     window.location.href = "/next_page_temp?current_page="+current_page+"&search_info="+search_info+"&books_id="+books_id;
       //用当前页加一
24 }
25 //最后一页
26 function last_page(){
27      var books_id = $("#hidden_booksid").val();
28     var search_info = document.getElementById("hidden_searchinfo").value;
29     var total_page = document.getElementById("total_page").innerHTML;
30     window.location.href = "/last_page_temp?search_info="+search_info+"&total_page="+total_page+"&books_id="+books_id;
       //传最后一页给后端
31 }
32 //跳转页面
33 function turnto_page(){
34      var books_id = $("#hidden_booksid").val();
35     var search_info = document.getElementById("hidden_searchinfo").value;
36     var turnto_page = document.getElementById("page").value;
37     var sum_page = document.getElementById("total_page").innerHTML;
38     //alert(turnto_page);
39     var page = new Array()
40     page[0]= turnto_page;
41     page[1]= sum_page;
42     var flag = check(3, page);           //验证输入的页码是否正确
43     if(flag.split('#')[0] == 'F'){
44         alert(flag.split('#')[1]);
45     }
46     else{
47         window.location.href = "/turnto_page_temp?turnto_page="+turnto_page+"&search_info="+search_info+"&books_id="+books_id;
48     }
49 }

注意：每一条路径都需要把导航编号传到后端。

页面的HTML代码（导航）：

1 <!-- 后端加载的for 循环-->
2        {%for books in bookslist%}
3       <a href="#" id="a_{{books.books_id}}" name="a_books" onclick="books_message('{{books.books_id}}')" 
class="list-group-item list-group-item-info">{{books.books_name}}</a>
4           {%end%}
5       <!-- 用来装导航编号(books_id)，默认后端绑为1-->
6         <input id="hidden_booksid" name="Hidden_booksid" type="hidden" value="{{books_id}}"/>

搜索框：

1 <input type="text"  id="search_info" class="form-control"  placeholder="输入信息搜索！" value="{{search_info}}">
2                                 <!-- 防止用户在点击分页时，输入的改变 -->
3                                 <input name="Hidden_searchinfo" id="hidden_searchinfo" type="hidden" value="{{search_info}}"/>
4                         <span class="input-group-btn" id="span1">
5                             <button class="btn btn-default" type="button" id="go_reserch" onClick="search_record()">Go!</button>

分页代码：

 1  <!-- 页脚-->
 2                     <div id="footer">
 3                         <ul class="pagination pagination">
 4                             <button class="btn btn-info btn-sm" href="#" id="firstpage" name="Firstpage" onclick="first_page()">&laquo;第一页</button>
 5                             <button class="btn btn-info btn-sm" onclick="pre_page()" id="prepage" name="Prepage">&laquo;上一页</button>
 6                             <button class="btn btn-info btn-sm" href="#" onclick="next_page()" id="nextpage" name="Nextpage">下一页&raquo;</button>
 7                             <button class="btn btn-info btn-sm" href="#" id="lastpage" name="Lastpage" onclick="last_page()">最后一页&raquo;</button>
 8                             跳转到 <input type="text" id="page" placeholder= "输入页码"></input>页
 9                         <button type="button" id="btn_go" onclick="turnto_page()">go</button>
10                         当前为第<span type="text" id="current_page">{{current_page}}</span>页 ,共<span type="text" id="total_page">{{total_page}}</span>页</ul>
11                     </div>

注意：{{current_page}}，{{total_page}}是后端绑回来的当前页面和总页数，默认为1，每一次操作都是把当前页传下去，然后又绑回来。

 

最后在页面上加上一段js，实现页面加载时去判断上一次点击过的是上面导航，这个需要后端每次都要绑回来才可以：

 1  window.οnlοad=function(){
 2 //按钮的点击匹配
 3                var books_id = $("#hidden_booksid").val();
 4               $("#a_" + books_id).css({"background":"#31708F","color":"white"});
 5               //分页的设置
 6      var cpage = document.getElementById("current_page").innerHTML;
 7                   var tpage = document.getElementById("total_page").innerHTML;
 8                   if(cpage == 1){
 9                       document.getElementById("prepage").disabled = true;
10                       document.getElementById("firstpage").className = "btn btn-sm btn-primary";
11                  }
12                 if(cpage == tpage){
13                      document.getElementById("nextpage").disabled = true;
14                      document.getElementById("lastpage").className = "btn btn-sm btn-primary";
15               }
16 }

 

转载于:https://www.cnblogs.com/jlj9520/articles/4865301.html