基于Bootstrap-table-1.14.1实现数据瀑布流
-
HTML代码
<div id="AvgWaitAndAvgTimeServiceTimeData_hall">
<div class="charts-area mg-b-15 mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 colm-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div id="AvgServiceAndWaitTime_hall_table_toolbar">
<button id="AvgServiceAndWaitTime_hall_table_export" class="btn btn-outline-primary" >
<i class="fa fa-download" ></i> 导出
</button>
</div>
<table id="AvgServiceAndWaitTime_hall_table" data-height="400" class="table table-hover mb-0 text-center" data-toolbar="#AvgServiceAndWaitTime_hall_table_toolbar">
<thead>
<tr>
<th data-field="column1">column1</th>
<th data-field="column2">column2</th>
<th data-field="column3">column3</th>
<th data-field="column4">column4</th>
<th data-field="column5">column5</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -
初始化表格
// 当前页码
var currentPage = 1;
// 总页数
var totalPage = 0;// 初始化表格函数
function loadHallAvgWaitTimeTable() {
// 定义表格对象
var $AvgServiceAndWaitTime_hall_table = $("#AvgServiceAndWaitTime_hall_table");
// 开始初始化表格,因为要实现瀑布流的效果,所以需要将分页功能禁用掉
$AvgServiceAndWaitTime_hall_table.bootstrapTable('destroy').bootstrapTable({
url: 'xxx/xxx/xxx.do',
method: 'GET',
dataType: 'json',
striped: false,
editable: false,
cache: false,
undefinedText: '',
pagination: false,
sortable: false,
data_local: 'zh_US',
idField: 'id',
contentType: 'application/x-www-form-urlencoded',
// 设置查询参数:首次加载十条数据
queryParams:
function () {
return {
pageSize: 10,
PageNumber: 1,
timeStamp: new Date().getTime()
}
},
// 对响应数据进行处理:将响应数据中的总页数取出,并赋值给totalPage变量
responseHandler: function (res) {
totalPage = res.obj.pages;
return eval(res.obj.rows);
},
// 数据加载成功后执行:这里主要对表格内容部分的滚动条进行监听,当监听到滚动条滑动到底部的时候,自动开始获取下一页数据,并将下一页数据拼接到表格中
onLoadSuccess: function () {
// 标识位
var isTrue = true;
// 对表格内容部分添加滚动监听事件
document.querySelector("#AvgWaitAndAvgTimeServiceTimeData_hall .fixed-table-body").addEventListener("scroll", function () {
// 获取表格数据展示部分(用户可直观的看到数据的部分)的高度,这部分高度是固定的
var nDivHight = $("#AvgWaitAndAvgTimeServiceTimeData_hall .fixed-table-body").height();
// 定义滚动距离总长变量(注意不是滚动条的长度)，使用HTML DOM元素对象的scrollHeight属性：获取整个元素的高度（包括带滚动条的隐蔽的地方）
var nScrollHeight = $(this)[0].scrollHeight;
// 滚动到的当前位置：使用HTML DOM元素对象的scrollTop属性：获取当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
var nScrollTop = $(this)[0].scrollTop;
// 使用JavaScript：Math对象的ceil方法（向上取整）:相当于当前内容区域的真实高度，包括不可见部分
var flagHeight = Math.ceil(nScrollTop + nDivHight);
// 判断页码：当前页面小于总页码
if (currentPage < totalPage) {
// 当前内容区域的真实高度 < 滚动条整体高度（包括隐藏看不见的地方） -500：证明滚动条马上就要滑动到底部了，此时开始加载下一页的数据
if (flagHeight >= (nScrollHeight - 500)) {
if (isTrue) {
console.log("当前页码:"+currentPage+"共多少页:"+totalPage+"-----滚动条到底部自动加载下一页")
setTimeout(function () {
// 页码加1
currentPage++;
// 获取下一页数据，并追加到表格中
getList();
}, 100);
//杀死标识位，阻止多次请求
isTrue = false;
}
}
}
}); function getList() {
$.ajax({
url: 'xxx/xxx/xxx.do',
method: 'GET',
dataType: 'json',
data: {
PageNumber: currentPage,
pageSize: 20
},
success: function (data) {
$("#AvgServiceAndWaitTime_hall_table").bootstrapTable("append", data.obj.rows);
isTrue = true;
}
})
}
}
})
}
