最近在學習BootStrap構建頁面，現記錄BootStrap table 的一些基本使用如下：
HTML文件：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="wrapper wrapper-content "> <div class="col-sm-12"> <div class="ibox"> <div class="ibox-body"> <div class="fixed-table-toolbar"> <div class="columns pull-left"> <button type="button" class="btn btn-primary" onclick="add()"> <i class="fa fa-plus" aria-hidden="true"></i>添加 </button> <button type="button" class="btn btn-danger" onclick="batchRemove()"> <i class="fa fa-trash" aria-hidden="true"></i>刪除 </button> </div> <div class="columns pull-right"> <button class="btn btn-success" onclick="reLoad()">查詢</button> </div> <div class="columns pull-right"> <input id="searchName" type="text" class="form-control" placeholder=""> </div> </div> <table id="exampleTable" data-mobile-responsive="true"> </table> </div> </div> </div> </div> <div th:include="include :: footer"></div> <script type="text/javascript" src="/js/appjs/common/job/job.js"></script> </body> </html>
JS文件：
$('#exampleTable')
.bootstrapTable(
{
method: 'get', // 服務器數據的請求方式 get or post
url: prefix + "/list", // 服務器數據的加載地址
// showRefresh : true,
// showToggle : true,
// showColumns : true,
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 設置為true會有隔行變色效果
dataType: "json", // 服務器返回的數據類型
pagination: true, // 設置為true會在底部顯示分頁條
// queryParamsType : "limit",
// //設置為limit則會發送符合RESTFull格式的參數
singleSelect: false, // 設置為true將禁止多選
// contentType : "application/x-www-form-urlencoded",
// //發送到服務器的數據編碼類型
pageSize: 10, // 如果設置了分頁，每頁數據條數
pageNumber: 1, // 如果設置了分布，首頁頁碼
// search : true, // 是否顯示搜索框
showColumns: false, // 是否顯示內容下拉框（選擇顯示的列）
sidePagination: "server", // 設置在哪里進行分頁，可選值為"client" 或者
// "server"
queryParams: function (params) {
return {
// 說明：傳入后台的參數包括offset開始索引，limit步長，sort排序列，order：desc或者,以及所有列的鍵值對
limit: params.limit,
offset: params.offset
// name:$('#searchName').val(),
// username:$('#searchName').val()
};
},
// //請求服務器數據時，你可以通過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 如果
// queryParamsType = 'limit' ,返回參數必須包含
// limit, offset, search, sort, order 否則, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false將會終止請求
columns: [
{
checkbox: true
},
{
field: 'id',
title: 'id'
},
{
field: 'jobName',
title: '任務名稱'
},
{
field: 'jobGroup',
title: '任務分組'
},
{
field: 'beanClass',
title: '任務類'
},
{
field: 'cronExpression',
title: 'cron表達式'
},
{
visible: false,
field: 'methodName',
title: '方法名稱'
},
{
visible: false,
field: 'isConcurrent',
title: '任務是否有狀態'
},
{
visible: false,
field: 'description',
title: '任務描述'
},
{
visible: false,
field: 'updateBy',
title: '更新者'
},
{
visible: false,
field: 'createDate',
title: '創建時間'
},
{
visible: false,
field: 'updateDate',
title: '更新時間'
},
{
visible: false,
field: 'createBy',
title: '創建者'
},
{
visible: false,
field: 'springBean',
title: 'Spring bean'
},
{
field: 'jobStatus',
title: '停起操作',
formatter: function (value, row, index) {
var e = '<a class="btn btn-success btn-xs" href="#" mce_href="#" title="點擊開啟" onclick="changeStatus(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-hourglass-start"></i>開啟</a> ';
var f = '<a class="btn btn-danger btn-xs" href="#" mce_href="#" title="點擊關閉" onclick="changeStatus(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-square-o">關閉</i></a> ';
if (row.jobStatus == 0) {
return e;
} else {
return f;
}
}
},
{
title: '操作',
field: 'id',
align: 'center',
formatter: function (value, row, index) {
var e = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="編輯" onclick="edit(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-edit"></i></a> ';
var d = '<a class="btn btn-warning btn-sm" href="#" title="刪除" mce_href="#" onclick="remove(\''
+ row.id
+ '\')"><i class="fa fa-remove"></i></a> ';
var f = '<a class="btn btn-success btn-sm" href="#" title="開啟" mce_href="#" onclick="resetPwd(\''
+ row.id
+ '\')"><i class="fa fa-key"></i></a> ';
return e + d;
}
}]
});
效果如下：
這里關於分頁，特別強調一下：
服務器分頁/客戶端分頁的轉換，table刷新
bootstrap默認是客戶端分頁 ，可通過html標簽
data-side-pagination:"client"或者js中的
sidePagination: 'server'
指定。注意，這兩種后台傳過來的json數據格式也不一樣
client : 正常的json array格式 [{},{},{}]
server： {“total”:0,”rows”:[]} 其中total表示查詢的所有數據條數，后面的rows是指當前頁面展示的數據量。
有事需要根據情況改變分頁方式，就要用到Methods中的
‘refreshOptions’ //設置更新時候的options
‘refresh’ //設置更新時的 url ,query(往后台傳參數)
$("#tablelist").bootstrapTable('refreshOptions', { sidePagination: 'client' //改為客戶端分頁 }); $("#tablelist").bootstrapTable('refresh', { url: "${ctxAdmin}/user/getsearchuserinfo", //重設數據來源 query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//傳到后台的參數 });