表格滚动分页
demo效果展示地址：demo
<!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="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>
.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;
}
$(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;//“如果滾動條的位置”+“可視窗口的高度”=“整個頁面可以滾動的高度”，那么就調(diào)用相應的函數(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ù)請求并添加進表格 */}}); })
?
轉(zhuǎn)載于:https://www.cnblogs.com/lemon-zhang/p/7878402.html
總結(jié)
- 上一篇： 求风筝误歌词
- 下一篇： eclipse 重启/打开内置浏览器