如何用bootstrap table實(shí)現(xiàn)數(shù)據(jù)表格？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)建站自成立以來(lái)，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開(kāi)發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷(xiāo)服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開(kāi)發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開(kāi)發(fā)工程師團(tuán)隊(duì)及專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。
在使用bootstrap table時(shí)可能在很多時(shí)候回用的表格來(lái)顯示數(shù)據(jù)，如果自己寫(xiě)那肯定沒(méi)問(wèn)題，但是數(shù)據(jù)展示出來(lái)就麻煩多了，然而bootstrap table 封裝了一套完善的數(shù)據(jù)表格組件，把從后臺(tái)請(qǐng)求的數(shù)據(jù)很容易就展示出來(lái)了，bootstrap table有兩種實(shí)現(xiàn)方式，一種是通過(guò)table寫(xiě)定在html里面，另一種是通過(guò)js實(shí)現(xiàn)，js實(shí)現(xiàn)比較靈活，所以這里采用js方式，下面來(lái)看實(shí)現(xiàn)。
客戶(hù)端
必須先引入相應(yīng)的css、js等文件
Bootstrap-Table 添加記錄
服務(wù)端：只需在接到請(qǐng)求時(shí)返回json數(shù)組就行了，是json數(shù)組哦，不是單個(gè)對(duì)象，不然就數(shù)據(jù)展示不出來(lái)。
注意bootstrap table 可以前端分頁(yè)也可以后端分頁(yè)，這里我們使用的是后端分頁(yè)，后端分頁(yè)時(shí)需返回含有
total：總記錄數(shù) 這個(gè)鍵值好像是固定的，我看文檔沒(méi)找到可以修改成別的
rows： 記錄集合 鍵值可以修改 dataField 自己定義成自己想要的就好
重慶分公司
重慶分公司
{
"total":200,
"rows":[
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26}]
}但是這可能會(huì)有請(qǐng)求時(shí)數(shù)據(jù)賦值不了的情況，那時(shí)你就會(huì)干著急了，下面還可以使用如下方式進(jìn)行數(shù)據(jù)渲染。這個(gè)效果和上面一個(gè)不一樣，這里就不上圖了。同樣第一步要引入官網(wǎng)所要求的的css/js等文件。
var $table = $("#product");
$table.bootstrapTable({
url: "http://192.168.6.240:8080/form",
dataType: "json",
contentType: "application/x-www-form-urlencoded",
// toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: false, //是否啟用排序
sortOrder: "desc", //排序方式
sidePagination: "client", //分頁(yè)方式：client客戶(hù)端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(shù)（*）
pageList:[5,10,20,30],//分頁(yè)步進(jìn)值 //可供選擇的每頁(yè)的行數(shù)（*）
// search:true, //是否顯示表格搜索，此搜索是客戶(hù)端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大
// strictSearch: true,
oolbarAlign:'right',//工具欄對(duì)齊方式
buttonsAlign:'right',//按鈕對(duì)齊方式
// showColumns: true, //是否顯示所有的列
// showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點(diǎn)擊選中行
//height: 500, //行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度
uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
// showToggle:true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
// detailView: false, //是否顯示父子表onEditableSave
// singleSelect: false,
// striped: true, //是否顯示行間隔色
// cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
// sortable: true, //是否啟用排序
// pagination: true, //顯示分頁(yè)按鈕
// sortName:"starttime",
// sortOrder:"desc", //默認(rèn)排序
// pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
// pageSize: 10, //默認(rèn)顯示的每頁(yè)個(gè)數(shù)
// showRefresh: true, //是否顯示刷新按鈕
// showPaginationSwitch: true, //是否顯示選擇分頁(yè)數(shù)按鈕
// queryParamsType: '', //默認(rèn)值為 'limit' ,在默認(rèn)情況下 傳給服務(wù)端的參數(shù)為：offset,limit,sort // 設(shè)置為 '' 在這種情況下傳給服務(wù)器的參數(shù)為：pageSize,pageNumber
queryParams:function(params){
var temp = {
pageSize: params.pageSize, //頁(yè)面大小
pageNumber: params.pageNumber, //頁(yè)碼
table_data:tempdata,
}
return temp;
},
responseHandler:function(res){
//動(dòng)態(tài)渲染表格之前獲取有后臺(tái)傳遞的數(shù)據(jù)時(shí),用于獲取出除去本身渲染所需的數(shù)據(jù)的額外參數(shù)
//詳見(jiàn)此函數(shù)參數(shù)的api
return res;
},
// search: true, //顯示搜索框（客戶(hù)端搜索）
//sidePagination: "server", //服務(wù)端處理分頁(yè)
// showToggle:true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
// detailView: false, //是否顯示父子表
columns: [{
title : '備注',
field : 'code',
align : 'center',
width : 100,
valign : 'middle',
},{
title : '操作',
field : 'name',
align : 'center',
width : 120 ,
valign : 'middle',
},
{
title : '編碼',
field : 'calcMode',
align : 'center',
width : 120 ,
valign : 'middle',
}],
onLoadSuccess: function(){ //加載成功時(shí)執(zhí)行
alert("加載數(shù)據(jù)成功");
},
onLoadError: function(){ //加載失敗時(shí)執(zhí)行
alert("加載數(shù)據(jù)失敗");
}
});
};會(huì)使用之后是不是覺(jué)得比自己寫(xiě)的table更好用多了，還不用寫(xiě)一大堆js和div等，還有更多功能可以去官網(wǎng)了解怎么使用。
看完上述內(nèi)容，你們掌握如何用bootstrap table實(shí)現(xiàn)數(shù)據(jù)表格的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
