基于JavaScript實現表格滾動分頁

來源：懂視網責編：小OO 時間：2020-11-27 22:25:13

基于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" />；<；<。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了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" />；<；<。

本文實例為大家分享了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); //這里做第二頁的數據請求并添加進表格 
 */
 }
 });
})

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于JavaScript實現表格滾動分頁

推薦度：

點擊下載本文 文檔為doc格式

標簽：表格實現滾動

熱門焦點

基于JavaScript實現表格滾動分頁

基于JavaScript實現表格滾動分頁

基于JavaScript實現表格滾動分頁

最新推薦

猜你喜歡

熱門推薦