您的位置：首页 > Web前端 > BootStrap

bootstrap table使用（上）——客户端分页

2018-02-09 12:05 295 查看

放假前比较轻松，这里抽空记录一下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的时候设置启用搜索框，并进行相应的设置，具体的属性请参考官方文档。客户端分页这就算完成了，如果需要参考服务端分页，请点这里。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航