Tutoriel sur l'implémentation du défilement et de la pagination des tableaux avec JavaScript-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Tutoriel sur l'implémentation du défilement et de la pagination des tableaux avec JavaScript

Dec 12, 2017 am 10:58 AM

javascript js 分页

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

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

Copier après la connexion

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;
}

Copier après la connexion

JS:

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

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

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

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

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

Copier après la connexion