滿足你使用bootstrap-table的基本需求 列表渲染 a標籤的bug 新增按鈕
如果你是初次 使用bootstrap-table這個外掛可以參考 程式碼是我從專案中直接搬過來的 放心使用！！！
有疑問直接留下評論 我會經常看部落格的！！！ 如果看了還是不會用 直接在評論區留言
建議多看官網：http://bootstrap-table.wenzhixin.net.cn/documentation/
中文文件：http://blog.csdn.net/rickiyeat/article/details/56483577
你可以看看以下我總結的幾個基礎使用場景 也許會對你有用
1》如何渲染列表 （這個是伺服器端實現的分頁 多數情況下都是伺服器端執行的分頁功能 這個你可以和後端溝通即可
直接在html檔案或者 jsp檔案中 寫入html程式碼如下
<table id="tableId"></table>
只需要這一個標籤即可對應的js程式碼如下： （紅色的程式碼 一個都不能少）
直接複製貼上到你的專案----》更換你的table標籤的id名---》更換你的藉口url---》更換你的columns裡面的引數
$('#tabId').bootstrapTable({url: "/user/queryAllUser.do",
method: 'post',
pagination: true,
queryParamsType: '',
contentType: "application/x-www-form-urlencoded",//必須要有！！！！
queryParams: function queryParams(params) { //設定查詢引數
var param = {
pageCurrent: params.pageNumber,
pageSize: params.pageSize
};
return param;
},//請求伺服器時所傳的引數
sidePagination: 'server',//指定伺服器端分頁
pageNumber: 1,
dataField: "data",// json包裹的第一層是什麼
striped: true, //是否顯示行間隔色
cache: false,
showRefresh: true, //重新整理
buttonsAlign: 'left',
searchAlign: 'left',
selectItemName: 'checkbox',
paginationPreText: "上一頁",
paginationNextText: "下一頁",
maintainSelected: true, //點選分頁記住複選框的選擇
buttonsAlign: 'right',
selectItemName: 'btSelectItem',
onLoadSuccess: function () {
$('.fixed-table-pagination .pagination a').attr('href', 'javascript:;');
},
responseHandler: responseHandler,
//請求資料成功後，渲染表格前的方法
onCheckAll: function (rows) {
$('.precise_sevice .delect_selected').show();
},
onUncheckAll: function () {
$('.precise_sevice .delect_selected').hide();
},
onCheck: function (row) {
$('.precise_sevice .delect_selected').show();
},
onUncheck: function (row) {
var tenent_tr = $('#tabId tbody tr');
var tr_length = tenent_tr.length;
for (var i = 0; i < tr_length; i++) {
if (tenent_tr.eq(i).hasClass('selected')) {
$('.precise_sevice .delect_selected').show();
return;
} else {
$('.precise_sevice .delect_selected').hide();
}
}
},
columns: [
{
checkbox: true,
field: 'checked',
},
{
field: 'userId',
title: 'id',
}, {
field: 'userServiceName',
title: '暱稱',
},
{
field: 'userRegistrationDate',
title: '註冊時間',
},
{
field: 'userLogintype',
title: '登入裝置',
formatter: ardorios
},
{
title: '詳情',
formatter: aquire_details
},
{
title: '修改資料',
formatter: operateFormatter
}
],
});
function responseHandler(result) {
var state = result.state;//在此做了錯誤程式碼的判斷
if (state != 200) {
alert("錯誤程式碼" + state);
return;
}
//如果沒有錯誤則返回資料，渲染表格
return {
total: result.data.pageObject.rowCount, //總頁數,前面的key必須為"total"
data: result.data.list //行資料，前面的key要與之前設定的dataField的值一致.
};
};
// 新增列表裡面的新增按鈕 -start
function operateFormatter(value, row, index) {
return [
'<button id="table_amend" class="btn btn-success table_btn amend" type="button">編輯</button>',
].join('');
};
//判斷手機型別 -start
function ardorios(value, row, index) {
if (value == 1) {
return ['安卓'].join('');
}
if (value == 2) {
return ['蘋果'].join('');
}
if (value == 3) {
return ['電腦'].join('');
}
}
//獲取詳情資訊-start
function aquire_details() {
return [
'<span class="aquire_details">詳情</span>'
].join('');
}
這個時候你必須用到onLoadSuccess這個事件 因為你要只是通過簡單的頁面重新整理執行一個語句改變他的href值 會失效 因為那個時候列表還沒有渲染 所以：
onLoadSueecss:function(){
$(檢視分頁按鈕的類名).attr("href","javascript:;");
}
//某種情況指的是 你可以嘗試將滑鼠移到兩個不同頁數的中間去檢視 這是滑鼠不再是手形 而是箭頭 此刻你再去點選 會發生頁面的跳轉
3》還有就是往bootstrap-table這個區域裡面新增按鈕 之類的 我使用的方法是通過選中class類名 然後直接append;
如果是下拉框的話 可以通過後端給你傳遞引數實現填充下拉框中的內容 減少你append標籤的程式碼量 如果少量的下拉選擇可以直接append即可
幫到你的話 可以打賞
