導(dǎo)語
Bootstrap-table 是基于Bootstrap的Jquery表格插件，通過簡單的設(shè)置赌莺，就可以擁有強(qiáng)大的單選冰抢、多選、排序雄嚣、分頁晒屎，以及編輯、導(dǎo)出缓升、過濾（擴(kuò)展）等等的功能鼓鲁。
Bootstrap-table 顯示數(shù)據(jù)到表格的方式有兩種，一種是客戶端（client）模式港谊，一種是服務(wù)器（server）模式骇吭。
客戶端模式，指的是在服務(wù)器中把要顯示到表格的數(shù)據(jù)一次性加載出來歧寺，然后轉(zhuǎn)換成JSON格式傳到要顯示的界面中燥狰〖辏客戶端模式較為簡單，它是把數(shù)據(jù)一次性加載出來放到界面上龙致，然后根據(jù)你設(shè)置的每頁記錄數(shù)蛀缝，自動生成分頁。當(dāng)點(diǎn)擊第二頁時(shí)目代，會自動加載出數(shù)據(jù)屈梁，不會再向服務(wù)器發(fā)送請求。對于數(shù)據(jù)量少時(shí)榛了，可以使用這種方法在讶，但是對于數(shù)據(jù)量大的系統(tǒng)，使用該方法會使加載速度變慢霜大，而且增加了服務(wù)器的負(fù)擔(dān)构哺，浪費(fèi)了資源。這時(shí)應(yīng)該采用服務(wù)器分頁模式战坤。
服務(wù)器模式曙强，指的是根據(jù)設(shè)定的每頁顯示的條數(shù)和當(dāng)前要顯示的頁碼，發(fā)送數(shù)據(jù)到服務(wù)器進(jìn)行查詢途茫，然后再顯示到表格中旗扑。該方法可以根據(jù)用戶的需求動態(tài)加載數(shù)據(jù)，節(jié)省了服務(wù)器資源慈省。
客戶端模式較為簡單，讀者可根據(jù)官方文檔和例子來實(shí)踐眠菇。本文主要介紹服務(wù)器模式边败，并可以實(shí)現(xiàn)帶參數(shù)的查詢。
開始使用
1捎废、bootstrap-table 的引入
Bootstrap table 可以有幾種快速入門的方法笑窜，每種適合不同技能等級的人使用，可以查看官方文檔（http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/）登疗，找到合適的方法引入排截。本文采用將bootstrap下載到本地直接引用。這里有兩點(diǎn)需要注意：
Bootstrap的所有Javascript插件都依賴Jquery,因此Jquery必須在Bootstrap之前引入辐益。
Bootstrap-table是Boootstrap的一個(gè)組件断傲，所以它是依賴Bootstrap的，我們首先需要添加Bootstrap的引用智政。
2认罩、頁面Html引用相關(guān)組件，并定義好一個(gè)空的table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div class="dataGrid">
<div class="formPart">
<form class="form-inline">
<div class="form-group col-md-5">
<label for="startTime" class="col-md-3 control-label time_label">開始時(shí)間</label>
<div class="input-group date form_date col-md-8" data-date="2018-01-23" data-date-format="yyyy-mm-dd" data-link-field="startTime" data-link-format="yyyy-mm-dd">
<input class="form-control startTime" size="16" type="text" value="2018-01-23">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="startTime" value="2018-01-23" /><br/>
</div>
<div class="form-group col-md-5">
<label for="endTime" class="col-md-3 control-label time_label">至</label>
<div class="input-group date form_date col-md-8" data-date="2018-01-23" data-date-format="yyyy-mm-dd" data-link-field="endTime" data-link-format="yyyy-mm-dd">
<input class="form-control endTime" size="16" type="text" value="2018-01-23">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="endTime" value="2018-01-23" /><br/>
</div>
<input type="button" class="btn btn-primary" value="查詢" id="queryBtn">
</form>
</div>
<div>
<table id="table" class="tableStyle" >
<thead>
<tr>
<th data-formatter="num" data-align="center">序號</th>
<th data-field="userid" data-align="center">用戶UID</th>
<th data-field="browseNum" data-align="center">瀏覽數(shù)</th>
<th data-field="status" data-align="center">報(bào)名狀態(tài)</th>
<th data-field="time" data-align="center">時(shí)間</th>
<th data-field="auditStatus" data-align="center">審核狀態(tài)</th>
<th data-field="result" data-align="center">審核結(jié)果</th>
</tr>
</thead>
</table>
</div>
</div>
<script src="js/asset/jquery-1.8.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-table.min.js"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="js/page/grid.js"></script>
</body>
</html>
3续捂、js代碼
var pageSize = 10;
var pageNum = 1;
var startTime = "";
var endTime = "";
$(function(){
startTime = $(".startTime").val();
endTime = $(".endTime").val();
// 對table進(jìn)行初始化
$('#table').bootstrapTable({
striped:true,
height:500,
pagination: true,
sidePagination:"server", //這里設(shè)置為服務(wù)端分頁模式
pageList: [10, 20, 30, 50],
onPageChange:pageChange,
onClickRow:clickRow
}).bootstrapTable('load',getData(pageNum,pageSize));
// 初始化日歷插件
$('.form_date').datetimepicker({
language: 'cn',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
// 對分頁插件顯示的文本進(jìn)行漢化垦垂，在html中需要引入漢化的js文件
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})
function getData(pageNum,pageSize){
var datas = {
"from":startTime,
"end":endTime,
"pageNum":pageNum,
"pageSize":pageSize
}
var data = {};
$.ajax({
type: "post",
url: "GetHistoryData",
cache: false,
data:datas,
async:false,
dataType:"json",
success: function (str) {
if(str.result == true){
var result = str.data.details;
var total = str.data.total;
data.total=total;
data.rows=result;
}else{
alert('系統(tǒng)忙宦搬，請稍候重試！');
}
},
error: function (result) {
alert('系統(tǒng)忙劫拗，請稍候重試间校！');
}
})
return data;
}
function pageChange(pageNum,pageSize){
$('#table').bootstrapTable('load',getData(pageNum,pageSize));
}
function clickRow(field, value){
console.log(field)
}
// 在表格顯示序號
function num(value, row, index){
var options = $('#table').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
// 根據(jù)查詢條件進(jìn)行查詢
$("#queryBtn").click(function(){
startTime = $(".startTime").val();
endTime = $(".endTime").val();
$('#table').bootstrapTable('load',getData(pageNum,pageSize));
})
4、頁面
5页慷、總結(jié)
初次寫簡書憔足，一個(gè)小Demo，如有寫錯的地方歡迎指正差购，謝謝四瘫！
