bootstrap table togglePagination隐藏显示分页器,如果已显示就会隐藏,如果没显示就会显示,效果图如下。
参数名称 | |
无 |
//隐藏或显示分页器
$('#table').bootstrapTable('togglePagination');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
<title>Bootstrap Table togglePagination在线例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
</style>
</head>
<body >
<div id="toolbar">
<button class="btn btn-secondary" onclick="togglePage()">隐藏显示分页</button>
</div>
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编码'
}, {
field: 'Food',
title: '食物'
}, {
field: 'Wi',
title: '重量'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar:"#toolbar",
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm", //设置表格样式
height:400,
//******前端分页设置****
pagination:true,
pageNumber:1,
pageSize:130,
pageList:"[10, 20, 50, 200]",
paginationHAlign:"left",
paginationDetailHAlign:"right"
//******前端分页设置****
});
function getData()
{
var data = [];
for (var i = 0; i < 200; i++)
{
var item = {
Id: i,
Food: '苹果',
Wi: i+1000
};
data.push(item);
};
return data;
}
function togglePage()
{
$('#table').bootstrapTable('togglePagination')
}
</script>
</body>
</html>