Bootstrap-table是在bootstrap-table的基礎上編寫的，bootstrap-table是壹個用於顯示數據的表格插件。bootstrap來自
Twitter是目前最流行的前端框架。Bootstrap基於HTML、css和JAVASCRIPT，具有簡單、靈活、前端開發速度快的優點。這裏不描述Right和bootstrap。這篇文章將重點介紹我對在項目中使用bootstrap-table的理解以及如何學習它。
首先，jquery，bootstrap，bootstrap表
三者之間的關系。bootstrap代碼的許多部分都涉及到jquery，也就是說
bootstrap依賴於jquery，而我們要使用的bootstrap-table是在bootstrap的基礎上創建的，所以在使用bootstrap-table之前必須參考jquery以及Bootstrap的相關js和css文件。
然後，bootstrap-table的特點如下:與jquery-ui、jqgrid等表格顯示插件相比，bootstrap-table是扁平化、輕量級的，對於壹些輕量級的數據顯示來說是綽綽有余的，同時也很好的支持父子表。最重要的是可以和bootstrap的其他標簽無縫結合。
1，介紹js和css。
& lt！- css樣式-& gt；
& ltlink href = " CSS/bootstrap/bootstrap . min . CSS " rel = " style sheet " >
& ltlink href = " CSS/bootstrap/bootstrap-table . CSS " rel = " style sheet " >
& lt！-js-& gt；
& ltscript src = " js/bootstrap/jquery-1.12.0 . min . js " type = " text/JavaScript " & gt；& lt/script & gt；
& ltscript src = " js/bootstrap/bootstrap . min . js " & gt；& lt/script & gt；
& ltscript src = " js/bootstrap/bootstrap-table . js " & gt；& lt/script & gt；
& ltscript src = " js/bootstrap/bootstrap-table-zh-cn . js " & gt；& lt/script & gt；
2.表格數據填充
BootStrap表可以通過兩種方式獲取數據，壹種是通過表的data-url屬性指定數據源，另壹種是通過JavaScript初始化表時指定url來獲取數據。
& lt表格數據-toggle = " table " & gt；
& ltthead & gt
...
& lt/thead & gt；
& lt/table & gt；
...$('#table ')。bootstrapTable({
URL:“data . JSON”
});
第二種方法在處理復雜數據時比第壹種更靈活，壹般用於填充表格數據。
$(function () {
//1.初始化表格
var o table = new table init()；
oTable。init()；
//2.初始化按鈕的click事件。
/* var oButtonInit = new button init()；
oButtonInit。init()；*/
});
var TableInit = function () {
var otable init = new Object()；
//初始化表格
oTableInit。Init = function () {
$('#tradeList ')。bootstrapTable({
URL:“/vender manager/trade list”，//請求背景的URL(*)
方法:“post”，//請求方法(*)
工具欄:' #toolbar '，//工具按鈕使用哪個容器？
Striped: true，//是否顯示行距顏色。
Cache: false，//是否使用緩存默認為true，所以壹般需要設置這個屬性(*)。
Pagination: true，//是否顯示pagination (*)。
Sortable: false，//是否啟用排序？
SortOrder: "asc", //排序方法
Queryparams: otableinit。queryparams，//傳遞參數(*)
side Pagination:“server”，//分頁方法:客戶端分頁，服務器端分頁(*)。
PageNumber:1，//初始化第壹頁，默認為第壹頁。
PageSize: 50，//每頁的記錄行數(*)
Pagelist: [10，25，50，100]，//每頁可供選擇的行數(*)
strictSearch:沒錯，
ClickToSelect: true，//是否啟用選中行的點擊？
高度:460，//行高。如果沒有設置height屬性，表格會根據記錄數自動感受表格高度。
UniqueId:“id”，//每行的唯壹標識符，通常是主鍵列。
CardView: false，//是否顯示詳細視圖？
DetailView: false，//是否顯示父子表？
列:[{
字段:“id”，
標題:“序列號”
}, {
字段:“流水id”，
標題，'交易號'
}, {
字段:“訂單id”，
標題:“訂單號”
}, {
字段:“接收時間”，
標題:“交易時間”
}, {
字段:“價格”，
標題:“金額”
}, {
字段:'硬幣_信用'，
標題:“投入硬幣”
}, {
字段:'賬單_信用'，
標題:“放入紙幣”
}, {
字段:“更改”，
標題:“改變”
}, {
字段:“貿易類型”，
標題:“交易類型”
},{
字段:“goodmachineid”，
標題:“貨機號”
},{
字段:“inneridname”，
標題:“蘭諾。”
},{
字段:“商品名稱”，
標題:“商品名稱”
}, {
字段:“更改狀態”，
標題:“付款”
},{
字段:“發送狀態”，
標題:“運輸”
},]
});
};
//獲取查詢的參數
otable init . query params = function(params){
Var temp = {//這裏的鍵名和控制器的變量名必須始終相同。如果在這裏改，控制器需要是壹樣的。
Limit: params.limit，//頁面大小
Offset: params.offset，//頁碼
sdate: $("#stratTime ")。val()，
edate: $("#endTime ")。val()，
sellerid: $("#sellerid ")。val()，
orderid: $("#orderid ")。val()，
卡號:$(" #卡號")。val()，
maxrows: params.limit，
pageindex:params.pageNumber，
portid: $("#portid ")。val()，
卡號:$(" #卡號")。val()，
trade type:$(' input:radio[name = " trade type "]:checked ')。val()，
成功:$(' input:radio[name = " success "]:checked ')。val()，
};
返回溫度；
};
返回oTableInit
};
字段字段必須對應於服務器返回的字段才能顯示數據。
3.在後臺獲取數據
servlet獲取數據。
BufferedReader bufr =新的BufferedReader(
new InputStreamReader(request . getinputstream()，“UTF-8”)；
StringBuilder s builder = new StringBuilder(" ")；
String temp =
while((temp = bufr.readLine())！= null){
sbuilder . append(temp)；
}
bufr . close()；
string JSON = sbuilder . tostring()；
JSON object JSON 1 = JSON object . from object(JSON)；
string sdate = JSON 1 . getstring(" sdate ")；//通過此方法獲取前端數據。
...
b、springMvc控制器中對應的方法獲取數據。
public JSON result get department(int limit，int offset，string orderId，string SellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
...
}相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
推薦閱讀:
Js實現毫秒+天+小時+分-秒轉換
Bootstrap，有哪些輪播模板？