主页 / 网络编程 /

基于JavaScript实现表格滚动分页

网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要为大家详细介绍了基于JavaScript实现表格滚动分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="./scroll.css" rel="external nofollow" rel="stylesheet" />
  <script src="https://cdn.bootcss./jquery/3.2.1/jquery.js"></script>
  <script src="./scroll.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-body">
      <table id="scroll-table">
        <thead>
          <tr>
            <th>Months</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody id="scroll-tbody">
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </tbody>      
      </table>
    </div>
  </div>
</body>
</html>

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 = $('<tr><td> good </td> <td> nice </td> /tr>');
   $('#scroll-tbody').append(tr);

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

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

上一篇：chorme 浏览器记住密码后input黄色背景处理方法(两 下一篇：Vue.js表单标签中的单选按钮、复选按钮和下拉列

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by