bootstarp table -- 分页数据显示
在bootstarp table 中,进行数据分页的显示,在使用分页的时候,bootStarp table 提供了两种方式,在这里我们介绍 客户端(client)进行数据的分页,希望大神能给我留言,指出这两种方式的区别。
在上一篇bootstarp table的介绍中,我们已经实现了在前端页面请求指定的json文件,然后可以将数据回显,下面将json文件中的数据修改成下面的方式
{
"page": 4,
// 在bootstarp 中的底层会自动获取 rows中的数据
"rows": [
{
"Level": "lisi",
"ParentName": "456",
"Name": "李四",
"title": 3,
"Desc": "0"
},
{
"Level": "wangwu",
"ParentName": "789",
"Name": "王五",
"title": 4,
"Desc": "0"
},
{
"Level": "zhaoliu",
"ParentName": "111",
"Name": "赵六",
"title": 5,
"Desc": "0"
},
{
"Level": "fanqi",
"ParentName": "222",
"Name": "范七",
"title": 6,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
},
{
"Level": "maoba",
"ParentName": "333",
"Name": "毛八",
"title": 7,
"Desc": "0"
}
],
// 数据的总个数
"total": 50
}
在文档中的page 和total 在这里并没有使用到,因为使用的是客户端(client)分页显示,所以只会用到rows,因为在bootstarp table的js文件中,默认获取的数据就是rows中的数据
进行设置完成之后,数据就会自动的展示出分页的数据,并且分页的组件,前提是需要设置
pagination: false, //是否显示分页(*)
设置上面的属性才可以完成数据的分页展示
核心配置
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
// $.get("data.json", function (datas) {
// $('#tb_departments').bootstrapTable("load", datas)
// })
// oTable.on("load-success.bs.table",function (data) {
// console.log("load success");
// $(".pull-right").css("display", "block");
// })
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: "data.json",
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: false, //是否显示分页(*)
sortable: false, //是否启用排序
// sortOrder: "asc", //排序方式
// 获取到的是全部的数据
// responseHandler: function (res) {
// return res;
// },
// 设置分页按钮的名称
paginationPreText: '上一页',
paginationNextText: '下一页',
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) 在设置的时候,会在底层进行数据的判断,进行数据的设置,如果是client就会执行别的数据
pageNumber: 1, //初始化加载第一页,默认第一页
// 用于设置每页显示的分页显示的数据
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true,
}, {
field: 'Name',
title: '部门名称',
formatter: nameMatter
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述'
}]
});
};
return oTableInit;
function nameMatter(a1, a2, a3, a4) {
console.log("a1:" + a1 + "...a2:" + a2 + "...a3:" + a3 + "...a4:" + a4)
console.log(arguments.length)
return a1;
}
};
页面数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>BootStrap Table使用</title>
<[email protected]*1、Jquery组件引用*@-->
<script src="../../../js/jquery-1.11.3.min.js"></script>
<[email protected]*2、bootstrap组件引用*@-->
<script src="../../js/bootstrap.min.js"></script>
<link href="../../css/bootstrap.min.css" rel="stylesheet"/>
<[email protected]*3、bootstrap table组件以及中文包的引用*@-->
<script src="../../js/bootstrap-table.js"></script>
<link href="../../css/bootstrap-table.css" rel="stylesheet"/>
<script src="../../js/bootstrap-table-zh-CN.js"></script>
<[email protected]*4、页面Js文件的引用*@-->
<script src="index.js"></script>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询
</button>
</div>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-12">
<div>
<table id="tb_departments"></table>
</div>
</div>
</div>
</div>
<table id="table"></table>
</body>