


Tutoriel sur l'implémentation du défilement et de la pagination des tableaux avec JavaScript
Dec 12, 2017 am 10:58 AM本文主要为大家详细介绍了基于JavaScript实现表格滚动分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
<!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> <p class="scroll-container"> <p 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> </p> </p> </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); //这里做第二页的数据请求并添加进表格 */ } }); })
相关推荐:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP

Explication détaillée du principe du plug-in de pagination MyBatis

Meilleure façon d'implémenter la pagination de tableaux en PHP
