基于JavaScript实现表格滚动分页

本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下

  
  
  
  
  
  
  


  
    
      

 

   

     
Months
     
Money
   
 
 

   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
   

     
January
     
$100
   
 
      
      
    
  

CSS:

.scroll-body{
 display: inline-block;
}
.scroll-container{
 text-align: center;
}
#scroll-table{
 border: 1px solid;
 border-collapse: collapse;
 width: 200px;
 height: 200px;
 overflow: auto;
 display: block;
}
　　

JS:

$(function () {
 $('#scroll-table').scroll(function (e) {
  var pagination = {
   page: 0,
   pageSize: 20
  };
  //滚动条位置 
  var scrollTop = $('#scroll-table').scrollTop();

  //可视窗口的高度 
  var viewportHeight = $('#scroll-table').height();

  //整个页面可以滚动的高度 
  var scrollHeight = $('#scroll-table')[0].scrollHeight;

  //“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”，那么就调用相应的函数加载数据 
  if (Math.round(scrollTop + viewportHeight) == scrollHeight) {
   var tr = $(' good   nice  /tr>');
   $('#scroll-tbody').append(tr);

   
  }
 });
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。