完美實(shí)現(xiàn)bootstrap分頁查詢
更新時(shí)間：2015年12月09日 10:19:12 作者：十期-崔曉光
這篇文章主要介紹了一個(gè)完美的bootstrap分頁查詢，如何利用bootstrap實(shí)現(xiàn)分頁查詢，本文將為大家進(jìn)行揭曉
最近，開始我們的Java項(xiàng)目，要求盡量使用bootstrap，因?yàn)樗萫asyUI要好看的多。然后就開始上網(wǎng)查，邊查邊做，雖然我們引入了一些bootstrap的樣式，但是并沒有js代碼，所有的功能都需要自己用js做。其實(shí)并不難，只要我們明白分頁的實(shí)質(zhì)就行。說了這么多，就讓我們看看分頁查詢的表格是怎么做出來的吧。
先上效果圖：
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樣式。如果沒有顯示出效果，或者顯示的效果不是自己想要的，我們可以適當(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;">
<!-- 搜索框的長度為該行的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>
<!-- 頁面底部顯示 -->
<!-- 每頁顯示幾條記錄 -->
<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>
每頁
<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頁 -->
<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="#">← 上一頁</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="#">下一頁 → </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3、相應(yīng)的js代碼
這里包含了模糊查詢事件，回車事件，上一步，下一步，選擇頁，選擇每頁顯示條數(shù)等常用功能，后期再補(bǔ)充排序和選擇列的顯示和隱藏等。
<script type="text/javascript">
//初始化，加載完成后執(zhí)行
window.onload=function(){
search();
};
//搜索按鈕綁定回車事件
document.onkeydown = function(event){
if (event.keyCode == 13) {
event.cancelBubble = true;
event.returnValue = false;
search();
}
}
//下一步
function next(){
//得到當(dāng)前選中項(xiàng)的頁號(hào)
var id=$("#pageNum option:selected").val();
//計(jì)算下一頁的頁號(hào)
var nextPage=parseInt(id)+1;
//得到select的option集合
var list=document.getElementById("pageNum").options;
//得到select中，下一頁的option
var nextOption=list[nextPage-1];
//修改select的選中項(xiàng)
nextOption.selected=true;
//調(diào)用查詢方法
search();
}
//上一步
function previous(){
//得到當(dāng)前選中項(xiàng)的頁號(hào)
var id=$("#pageNum option:selected").val();
//計(jì)算上一頁的頁號(hào)
var previousPage=parseInt(id)-1;
//得到select的option集合
var list=document.getElementById("pageNum").options;
//得到select中，上一頁的option
var previousOption=list[previousPage-1];
//修改select的選中項(xiàng)
previousOption.selected=true;
//調(diào)用查詢方法
search();
}
//修改每頁顯示條數(shù)時(shí)，要從第一頁開始查起
function research() {
//得到select的option集合
var list=document.getElementById("pageNum").options;
//得到select中，第一頁的option
var nextOption=list[0];
//修改select的選中項(xiàng)
nextOption.selected=true;
//調(diào)用查詢方法
search();
}
//搜索，模糊查詢學(xué)生違紀(jì)信息
function search(){
//得到查詢條件
var searchString=$("#searchString").val();
//得到每頁顯示條數(shù)
var pageSize=$("#pageSize").val();
//得到顯示第幾頁
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)前記錄開始數(shù)
var pageNumBegin=(pageNum-1)*pageSize+1;
//當(dāng)前記錄結(jié)束數(shù)
var pageNumEnd=pageNum*pageSize
//如果結(jié)束數(shù)大于記錄總數(shù)，則等于記錄總數(shù)
if(pageNumEnd>pageNumCount){
pageNumEnd=pageNumCount;
}
//得到總頁數(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)";
//顯示所有的頁碼數(shù)
var pageSelect =document.getElementById("page");
var pageOption="";
var flag;
//刪除select下所有的option，清除所有頁碼
document.getElementById("pageNum").options.length=0;
for(var i=0;i<pageCount;i++){
flag=(i+1).toString();
var option;
//如果等于當(dāng)前頁碼
if(flag==pageNum){
//實(shí)例化一個(gè)option,則當(dāng)前頁碼為選中狀態(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條，則不顯示分頁
if((pageNumCount-5)<0){
document.getElementById("bottomTool").style.display="none";
}else{
document.getElementById("bottomTool").style.display="";
}
/**給上一步下一步加顏色**/
//判斷是否只有一頁
if(pageCount==1){
//如果只有一頁，上一步，下一步都為灰色
$("#previousPage").css("color","#AAA");//給上一步加灰色
$("#nextPage").css("color","#AAA");//給下一步加灰色
}else if(pageNum-1<1){
//如果是首頁,則給上一步加灰色，下一步變藍(lán)
$("#previousPage").css("color","#AAA");//給上一步加灰色
$("#nextPage").css("color","#00F");//給下一步加藍(lán)色
}else if(pageNum==pageCount){
//如果是尾頁,則給上一步加藍(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)過這些天的努力，實(shí)現(xiàn)了最基本的分頁查詢功能，還包括上一頁、下一頁以及選擇跳頁的效果，而且可以進(jìn)行模糊查詢，而且如果記錄小于5條就不會(huì)產(chǎn)生分頁等。后期再加上排序，選擇列的顯示和影藏就更好了。我們需要做的還很多，只要我們努力，就一定能夠做到。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- Bootstrap Paginator分頁插件使用方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
- Bootstrap table分頁問題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
- Bootstrap分頁插件之Bootstrap Paginator實(shí)例詳解
- 基于Bootstrap3表格插件和分頁插件實(shí)例詳解
- 基于BootStrap實(shí)現(xiàn)局部刷新分頁實(shí)例代碼
- Bootstrap table兩種分頁示例
- BootStrap Table前臺(tái)和后臺(tái)分頁對(duì)JSON格式的要求
- bootstrap下拉分頁樣式 帶跳轉(zhuǎn)頁碼
相關(guān)文章
javascript中先加加和后加加區(qū)別 ++a和a++區(qū)別解析
從學(xué)習(xí) javascript 開始,就對(duì) 先加加 和 后加加 模糊不清,時(shí)至今日,再來學(xué)習(xí)一下,這篇文章主要介紹了javascript中先加加和后加加區(qū)別++a和a++區(qū)別解析,需要的朋友可以參考下2023-09-09
JS簡(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ì)頁面元素進(jìn)行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)
用DIV和DIV自身的滾動(dòng)條相互控制內(nèi)容的滾動(dòng)，DIV自身的滾動(dòng)條樣式可以用DIV層覆蓋，重寫滾動(dòng)條樣式2013-06-06
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下2017-03-03
alert中斷settimeout計(jì)時(shí)功能
在測(cè)試過程中發(fā)現(xiàn)alert會(huì)中斷settimeout的計(jì)時(shí)功能,關(guān)閉對(duì)話框后，settimeout的時(shí)間會(huì)重頭開始計(jì)時(shí)，而不是從中斷處，感興趣的朋友可以了解下2013-07-07
JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了如何使用three.js 制作一個(gè)三維的推箱子游戲，文中代碼非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
剛接觸python的時(shí)候，最不習(xí)慣的事情，就是每個(gè)方法都要加一個(gè)self。無論Javascript還是C#，都直接一個(gè)this搞定，干嘛非要加一個(gè)變量self。2010-08-08
js實(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ì)講解一下如何通過javascript寫出異步圖片上傳，并且把實(shí)例代碼給大家分享了下，有興趣的讀者們測(cè)試一下吧。2017-12-12