完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xú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è)查詢(xún)的表格是怎么做出來(lái)的吧。
先上效果圖:
1、引入的css樣式
我們需要引入bootstrap自帶的表格樣式,這樣比較好看,如果再需要修改的話(huà),我們就在其基礎(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代碼
這里包含了模糊查詢(xún)事件,回車(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)用查詢(xún)方法 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)用查詢(xún)方法 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)用查詢(xún)方法 search(); } //搜索,模糊查詢(xún)學(xué)生違紀(jì)信息 function search(){ //得到查詢(xún)條件 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); //課程名稱(chēng) 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è)查詢(xún)功能,還包括上一頁(yè)、下一頁(yè)以及選擇跳頁(yè)的效果,而且可以進(jìn)行模糊查詢(xú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í)有所幫助。
- Bootstrap Paginator分頁(yè)插件使用方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- Bootstrap table分頁(yè)問(wèn)題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
- Bootstrap分頁(yè)插件之Bootstrap Paginator實(shí)例詳解
- 基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解
- 基于BootStrap實(shí)現(xiàn)局部刷新分頁(yè)實(shí)例代碼
- Bootstrap table兩種分頁(yè)示例
- BootStrap Table前臺(tái)和后臺(tái)分頁(yè)對(duì)JSON格式的要求
- bootstrap下拉分頁(yè)樣式 帶跳轉(zhuǎn)頁(yè)碼
相關(guān)文章
javascript中先加加和后加加區(qū)別 ++a和a++區(qū)別解析
從學(xué)習(xí) javascript 開(kāi)始,就對(duì) 先加加 和 后加加 模糊不清,時(shí)至今日,再來(lái)學(xué)習(xí)一下,這篇文章主要介紹了javascript中先加加和后加加區(qū)別++a和a++區(qū)別解析,需要的朋友可以參考下2023-09-09JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法,結(jié)合實(shí)例形式分析了JavaScript使用createElement()方法針對(duì)頁(yè)面元素進(jìn)行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)
用DIV和DIV自身的滾動(dòng)條相互控制內(nèi)容的滾動(dòng),DIV自身的滾動(dòng)條樣式可以用DIV層覆蓋,重寫(xiě)滾動(dòng)條樣式2013-06-06alert中斷settimeout計(jì)時(shí)功能
在測(cè)試過(guò)程中發(fā)現(xiàn)alert會(huì)中斷settimeout的計(jì)時(shí)功能,關(guān)閉對(duì)話(huà)框后,settimeout的時(shí)間會(huì)重頭開(kāi)始計(jì)時(shí),而不是從中斷處,感興趣的朋友可以了解下2013-07-07JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08實(shí)例講解javascript實(shí)現(xiàn)異步圖片上傳方法
給大家詳細(xì)講解一下如何通過(guò)javascript寫(xiě)出異步圖片上傳,并且把實(shí)例代碼給大家分享了下,有興趣的讀者們測(cè)試一下吧。2017-12-12