bootstrap table使用（上）——客戶端分頁
阿新 • • 發佈：2019-02-05
放假前比較輕鬆，這裡抽空記錄一下bootstrap table的使用方法。由於bootstrap table分頁方式分兩種，客戶端和服務端，所以打算分上下兩篇文章來記錄。廢話不多說，還是按照老規矩先來幾個參考地址BootStrap Table中文文件，BootStrap Table使用方法，當然使用之前還要引入Jquery和BootStrap庫，它們之間是依賴關係。
table所在JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" 這個使用示例是使用js方法初始化table，所以還要寫一個test.js檔案
$(function() {
/*load頁面之後，載入資料*/
initTable();
/*點選刪除*/
$("#btn-del").click(function() {
//處理邏輯
});
/* 點選新增*/
$("#btn-add").click(function() {
//處理邏輯
});
/*點選編輯 */
$("#btn-edit").click(function() {
//處理邏輯
});
});
/* 改變可用狀態available*/
function changeStatus(event) {
//處理邏輯
}
/*
* 初始化表格
*/
function initTable(){
var rows = new Array();
$('#test-table').bootstrapTable({
method : 'get', //伺服器資料的請求方式 'get' or 'post'
contentType : "application/json", //傳送到伺服器的資料編碼型別
url : '/test/test/getList', //伺服器資料的載入地址
dataType : 'json', //伺服器返回的資料型別
cache : false, //設定禁用 AJAX 資料快取
pagination : true, //設定為 true 會在表格底部顯示分頁條
paginationLoop : false, //設定分頁條禁用迴圈的功能。
sidePagination : "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
striped : true, //設定隔行變色效果
clickToSelect : true, //在點選行時，自動選擇rediobox 和 checkbox
queryParams : queryParams, //請求伺服器時附加的引數
queryParamsType : '', //若設定為 'limit' 則會發送符合 RESTFul 格式的引數
minimumCountColumns : 2, //當列數小於此值時，將隱藏內容列下拉框。
paginationPreText : '上一頁',
paginationNextText : '下一頁',
pageNumber : 1, //初始化載入第一頁，預設第一頁
pageSize : 15, //每頁的記錄行數（*）
pageList : [5,10,15], //可供選擇的每頁的行數（*）
toolbar : '#toolbar', //指定工具按鈕組的容器
toolbarAlign : 'right', //指定 toolbar 水平方向的位置。'left' or 'right'
uniqueId : "id", //每一行的唯一標識，一般為主鍵列
responseHandler : responseHandler, //載入伺服器資料之前的處理程式，可以用來格式化資料。 引數：res為從伺服器請求到的資料。
/*
* 監聽事件：行全選/多選/取消多選時需要改變樣式——選中多行時不可編輯，只可刪除
*/
onCheckAll: function (rows) {
$("#btn-edit").attr("disabled","disabled");
},
onUncheckAll: function (rows) {
$("#btn-edit").removeAttr("disabled");
},
onCheck: function (row) {
rows.push(row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
onUncheck: function (row) {
removeByValue(rows,row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
columns: [
{
selectItemName :'btSelectItem',
checkbox:true,
align : 'center',
valign : 'middle'
},{
field : 'id',
title : '序號',
visible:false,
align : 'center',
valign : 'middle'
},{
field : 'roleName',
title : '角色名',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '是否可用',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '是';
} else if (value == '1') {
return '否';
}
}
},{
field : 'createTime',
title : '建立時間',
align : 'center',
valign : 'middle'
},{
field : 'updateTime',
title : '修改時間',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '操作',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">禁用</button>';
} else if (value == '1') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">啟用</button>';
}
}
}]
});
}
function refresh() {
$("#test-table").bootstrapTable('refreshOptions',{url:'/jzkfgl/role/getList'});
}
function removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}由於設定在客戶端分頁，所以會從資料庫中一下把所有符合條件的資料全部查詢出來，然後在客戶端由bootstrap table幫你分頁，即使要使用搜索框進行模糊查詢，也只是需要在初始化table的時候設定啟用搜索框，並進行相應的設定，具體的屬性請參考官方文件。客戶端分頁這就算完成了，如果需要參考服務端分頁，請點這裡。