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" prefix="c"%>
<c:set var="baseurl" value="${pageContext.request.contextPath}/"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href ="${baseurl }/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${baseurl }/bootstrap/css/bootstrap-table.css"/>
<script src="${baseurl }/jquery/jquery.min.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table-zh-CN.js" ></script>
<script src="${baseurl }/scripts/test.js"></script>
<title>test</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div>
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default glyphicon glyphicon-pencil" id="btn-add">新增</button>
<button type="button" class="btn btn-default glyphicon glyphicon-edit" id="btn-edit">編輯</button>
<button type="button" class="btn btn-default glyphicon glyphicon-remove" id="btn-del">刪除</button>
</div>
</div>
<table id="test-table"></table>
</div>
</div>
</div>
</body>
</html>
這個使用示例是使用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的時候設定啟用搜索框,並進行相應的設定,具體的屬性請參考官方文件。客戶端分頁這就算完成了,如果需要參考服務端分頁,請點這裡。