基于Bootstrap v4.1.1 & Bootstrap-table-1.14.1实现数据瀑布流

基于Bootstrap-table-1.14.1实现数据瀑布流

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>
   

2. 初始化表格

   // 当前页码
   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;
                       }
                   })
               }
           }
       })
   }