JavaScript实现表格滚动分页教程

本文主要为大家详细介绍了基于javascript实现表格滚动分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

  
  
  
  
  
  
  


  

    

      

        

          

            
Months
            
Money
          
        
        

          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
          

            
January
            
$100
          
        
      
      
    

  

通用产品企业网站(.NET2.0)1.0

1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用

下载

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:

立即学习“Java免费学习笔记（深入）”；

$(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);

   /*
    * pagination.page += 1;
    * dataAjax(pagination); //这里做第二页的数据请求并添加进表格 
    */
  }
 });
})

相关推荐：

php后台表格分页功能的实现方法

js表格分页实现代码_javascript技巧

angularjs表格分页功能详解_AngularJS