本文實(shí)例為大家分享了js實(shí)現(xiàn)表格滾動(dòng)分頁展示的具體代碼，供大家參考，具體內(nèi)容如下
<!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 }; //滾動(dòng)條位置 var scrollTop = $('#scroll-table').scrollTop(); //可視窗口的高度 var viewportHeight = $('#scroll-table').height(); //整個(gè)頁面可以滾動(dòng)的高度 var scrollHeight = $('#scroll-table')[0].scrollHeight; //“如果滾動(dòng)條的位置”+“可視窗口的高度”=“整個(gè)頁面可以滾動(dòng)的高度”，那么就調(diào)用相應(yīng)的函數(shù)加載數(shù)據(jù) 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); //這里做第二頁的數(shù)據(jù)請求并添加進(jìn)表格 */ } });})
新聞熱點(diǎn)
疑難解答
圖片精選
