完美實(shí)現(xiàn)bootstrap分頁(yè)查詢

更新時(shí)間：2015年12月09日 10:19:12 作者：十期-崔曉光

這篇文章主要介紹了一個(gè)完美的bootstrap分頁(yè)查詢，如何利用bootstrap實(shí)現(xiàn)分頁(yè)查詢，本文將為大家進(jìn)行揭曉

最近，開(kāi)始我們的Java項(xiàng)目，要求盡量使用bootstrap，因?yàn)樗萫asyUI要好看的多。然后就開(kāi)始上網(wǎng)查，邊查邊做，雖然我們引入了一些bootstrap的樣式，但是并沒(méi)有js代碼，所有的功能都需要自己用js做。其實(shí)并不難，只要我們明白分頁(yè)的實(shí)質(zhì)就行。說(shuō)了這么多，就讓我們看看分頁(yè)查詢的表格是怎么做出來(lái)的吧。
先上效果圖：

1、引入的css樣式
我們需要引入bootstrap自帶的表格樣式，這樣比較好看，如果再需要修改的話，我們就在其基礎(chǔ)上再改。

<link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap-responsiv.css">
<link rel="stylesheet" type="text/css" href="htuploads/rs/238/n8vhm36h/dataTables.bootstra.css">

2、需要的HTML文本
這里需要注意的是，每一個(gè)標(biāo)簽的id和class名字不要亂改，因?yàn)樗鼘?duì)應(yīng)著一些js代碼和css樣式。如果沒(méi)有顯示出效果，或者顯示的效果不是自己想要的，我們可以適當(dāng)進(jìn)行微調(diào)。

<meta charset="UTF-8">
<title>學(xué)生違紀(jì)信息</title>
<%-- <%@ include file="/common.jsp"%> --%>
<!-- 封裝的一些bootstrap的樣式 -->
<%@ include file="/bootstrap.jsp"%>
</head>
<body>

 <!-- 搜索區(qū)域 -->
 <div class="row" style="padding-bottom: 20px;margin-top:20px;">
 <!-- 搜索框的長(zhǎng)度為該行的3/4 -->
 <div class="col-md-9">
  <div class="input-group">
  <input id="searchString" type="text" style="height:28px;" class="form-control" placeholder="請(qǐng)輸入實(shí)體名">
  <span class="input-group-btn">
  　　  <button type="button" class="btn btn-info" onclick="search()" onkeypress="Enter()">
   <span class="glyphicon glyphicon-search" aria-hidden="true"/>
   搜索
   </button>
  </span>
 </div>
 </div>
 </div>

 <!-- 表格顯示 -->
 <div class="row">
 <div class="col-md-12" style="margin-top:20px;">
  <div class="panel panel-info">
  <div class="panel-heading">學(xué)生違紀(jì)信息</div>
   <table id="table" class="table table-striped table-bordered table-hover datatable">
   <thead id="tem">
    <th id="studentId">學(xué)號(hào)</th>
    <th id="studentName">姓名</th>
    <th id="courseId">考試科目</th>
    <th id="examRoomId">考場(chǎng)號(hào)</th>
    <th id="className">班級(jí)</th>
    <th id="teacherId">監(jiān)考人員</th>
   </thead>
   <tbody>
   </tbody>
   </table>
  </div>
 </div>
 </div>

 <!-- 頁(yè)面底部顯示 -->
 <!-- 每頁(yè)顯示幾條記錄 -->
 <div id="bottomTool" class="row-fluid" >
 <div class="span6" style="width:25%;;margin-right: 10px;">
  <div class="dataTables_length" id="DataTables_Table_0_length">
  <label>
   每頁(yè)
   <select id="pageSize" onchange="research()"
   aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
   <option selected="selected" value="10">10</option>
   <option value="25">25</option>
   <option value="50">50</option>
   <option value="100">100</option>
   </select>
   條記錄
  </label>
  </div>
 </div>
 <!-- 顯示第 1 至 10 項(xiàng)記錄，共 57 項(xiàng) -->
 <div class="span6" style="width:25%;" >
  <div id="DataTables_Table_0_info" class="dataTables_info">顯示第 1 至 10 項(xiàng)記錄，共 57 項(xiàng)</div>
 </div>
 <!-- 第2頁(yè) -->
 <div class="span6" style="width:30%;">
  <div class="dataTables_paginate paging_bootstrap pagination">
  <ul id="previousNext">
   <li onclick="previous()" class="prev disabled"><a id="previousPage" href="#">← 上一頁(yè)</a></li>
   <div id="page" style="float:left;">
   <select id="pageNum" onchange="search()"
   style="width:50PX;margin-right:1px;" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
    <option selected="selected" value="1">1</option>
   </select>
   </div>
   <li class="next" onclick="next()"><a id="nextPage" href="#">下一頁(yè) → </a></li>
  </ul>
  </div>
 </div>

 </div>
</body>
</html>

3、相應(yīng)的js代碼
這里包含了模糊查詢事件，回車(chē)事件，上一步，下一步，選擇頁(yè)，選擇每頁(yè)顯示條數(shù)等常用功能，后期再補(bǔ)充排序和選擇列的顯示和隱藏等。

<script type="text/javascript">
 //初始化，加載完成后執(zhí)行
 window.onload=function(){
 search();
 };
 //搜索按鈕綁定回車(chē)事件
 document.onkeydown = function(event){
 if (event.keyCode == 13) {
  event.cancelBubble = true;
  event.returnValue = false;
  search();
 }
 } 

 //下一步
 function next(){
 //得到當(dāng)前選中項(xiàng)的頁(yè)號(hào)
 var id=$("#pageNum option:selected").val();
 //計(jì)算下一頁(yè)的頁(yè)號(hào)
 var nextPage=parseInt(id)+1;
 //得到select的option集合
 var list=document.getElementById("pageNum").options;
 //得到select中，下一頁(yè)的option
 var nextOption=list[nextPage-1];
 //修改select的選中項(xiàng)
 nextOption.selected=true;
 //調(diào)用查詢方法
 search();
 }

 //上一步
 function previous(){

 //得到當(dāng)前選中項(xiàng)的頁(yè)號(hào)
 var id=$("#pageNum option:selected").val();
 //計(jì)算上一頁(yè)的頁(yè)號(hào)
 var previousPage=parseInt(id)-1;
 //得到select的option集合
 var list=document.getElementById("pageNum").options;
 //得到select中，上一頁(yè)的option
 var previousOption=list[previousPage-1];
 //修改select的選中項(xiàng)
 previousOption.selected=true;
 //調(diào)用查詢方法
 search();
 }

 //修改每頁(yè)顯示條數(shù)時(shí)，要從第一頁(yè)開(kāi)始查起
 function research() {
 //得到select的option集合
 var list=document.getElementById("pageNum").options;
 //得到select中，第一頁(yè)的option
 var nextOption=list[0];
 //修改select的選中項(xiàng)
 nextOption.selected=true;
 //調(diào)用查詢方法
 search();
 }

 //搜索，模糊查詢學(xué)生違紀(jì)信息
 function search(){
 //得到查詢條件
 var searchString=$("#searchString").val();
 //得到每頁(yè)顯示條數(shù)
 var pageSize=$("#pageSize").val();
 //得到顯示第幾頁(yè)
 var pageNum=$("#pageNum").val();

 $.ajax({
  type: "POST",
  async: false,
  url: "queryStudentDisciplineByPage",
  data:{"searchString":searchString,
   "pageSize":pageSize,
   "pageNum":pageNum,
  },
  dataType:"text",
  success: function (data) {

  //將json字符串轉(zhuǎn)為json對(duì)象
  var pageEntity=JSON.parse(data);
  //得到結(jié)果集
  var obj=pageEntity["rows"];

  //將除模板行的thead刪除，即刪除之前的數(shù)據(jù)重新加載 
  $("thead").eq(0).nextAll().remove(); 
  //將獲取到的數(shù)據(jù)動(dòng)態(tài)的加載到table中 
  for (var i = 0; i < obj.length; i++) { 
   //獲取模板行，復(fù)制一行 
   var row = $("#tem").clone(); 

   //給每一行賦值
   row.find("#studentId").text(obj[i].studentId); //學(xué)號(hào)
   row.find("#studentName").text(obj[i].studentName); //學(xué)生姓名 
   row.find("#courseId").text(obj[i].courseId); //課程名稱 
   row.find("#examRoomId").text(obj[i].examRoomId); //考場(chǎng)號(hào)
   row.find("#className").text(obj[i].className); //所屬班級(jí) 
   row.find("#teacherId").text(obj[i].teacherId); //監(jiān)考教師Id

   //將新行添加到表格中 
   row.appendTo("#table"); 
  } 
  //當(dāng)前記錄總數(shù)
  var pageNumCount=pageEntity["total"];
  //當(dāng)前記錄開(kāi)始數(shù)
  var pageNumBegin=(pageNum-1)*pageSize+1;
  //當(dāng)前記錄結(jié)束數(shù)
  var pageNumEnd=pageNum*pageSize
  //如果結(jié)束數(shù)大于記錄總數(shù)，則等于記錄總數(shù)
  if(pageNumEnd>pageNumCount){
   pageNumEnd=pageNumCount;
  }
  //得到總頁(yè)數(shù)
  var pageCount;
  if(pageNumCount/pageSize==0){
   pageCount=pageNumCount/pageSize;
  }else{
   pageCount=Math.ceil(pageNumCount/pageSize);
  }

  //輸出"顯示第 1 至 10 項(xiàng)記錄，共 57 項(xiàng)"
  document.getElementById("DataTables_Table_0_info").innerHTML=
   "顯示第"+pageNumBegin.toString()
   +" 至 "+pageNumEnd.toString()
   +" 項(xiàng)記錄，共 "+pageNumCount.toString()+" 項(xiàng)";

  //顯示所有的頁(yè)碼數(shù)
  var pageSelect =document.getElementById("page");
  var pageOption="";
  var flag;
  //刪除select下所有的option，清除所有頁(yè)碼
  document.getElementById("pageNum").options.length=0;
  for(var i=0;i<pageCount;i++){
   flag=(i+1).toString();
   var option;
   //如果等于當(dāng)前頁(yè)碼
   if(flag==pageNum){
   //實(shí)例化一個(gè)option,則當(dāng)前頁(yè)碼為選中狀態(tài)
   option=new Option(flag, flag, false, true);
   }else{
   option=new Option(flag, flag, false, false);
   }
   //將option加入select中
   document.getElementById("pageNum").options.add(option);
  }

  //如果總記錄數(shù)小于5條，則不顯示分頁(yè)
  if((pageNumCount-5)<0){
   document.getElementById("bottomTool").style.display="none";
  }else{
   document.getElementById("bottomTool").style.display="";
  }

  /**給上一步下一步加顏色**/
  //判斷是否只有一頁(yè)
  if(pageCount==1){

   //如果只有一頁(yè)，上一步，下一步都為灰色
   $("#previousPage").css("color","#AAA");//給上一步加灰色
   $("#nextPage").css("color","#AAA");//給下一步加灰色
  }else if(pageNum-1<1){
   //如果是首頁(yè),則給上一步加灰色，下一步變藍(lán)
   $("#previousPage").css("color","#AAA");//給上一步加灰色
   $("#nextPage").css("color","#00F");//給下一步加藍(lán)色
  }else if(pageNum==pageCount){
   //如果是尾頁(yè),則給上一步加藍(lán)色，下一步灰色
   $("#previousPage").css("color","#00F");//給上一步標(biāo)簽加藍(lán)色
   $("#nextPage").css("color","#AAA");//給下一步標(biāo)簽加灰色
  }else{
   //上一步為藍(lán)色，下一步為綠色
   $("#previousPage").css("color","#00F");//給上一步加藍(lán)色
   $("#nextPage").css("color","#00F");//給下一步加藍(lán)色
  }
  }
 });
 }

</script>

經(jīng)過(guò)這些天的努力，實(shí)現(xiàn)了最基本的分頁(yè)查詢功能，還包括上一頁(yè)、下一頁(yè)以及選擇跳頁(yè)的效果，而且可以進(jìn)行模糊查詢，而且如果記錄小于5條就不會(huì)產(chǎn)生分頁(yè)等。后期再加上排序，選擇列的顯示和影藏就更好了。我們需要做的還很多，只要我們努力，就一定能夠做到。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: