基于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.com/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); //这里做第二页的数据请求并添加进表格 
    */
  }
 });
})

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

基于JavaScript实现表格滚动分页

请登录后发表评论