通过js实现数据分页

最新推荐文章于 2024-07-01 11:34:43 发布

WaiteH

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量3.1k

点赞数 2

分类专栏： JS JSP

本文链接：https://blog.csdn.net/hwq293/article/details/80083060

版权

本文介绍了如何利用JavaScript实现数据分页，通过加载全部数据后使用JS遍历并控制显示部分行来达到分页效果，同时提供了相关的HTML代码和JavaScript实现方法。

摘要由CSDN通过智能技术生成

原理：先加载所有的数据，然后对数据的行进行js遍历，设置部分行显示，实现分页效果
html代码

<html>
<head>
    <meta charset='utf-8'>
<script type="text/javascript" src="page.js"></script>

 <style type="text/css">
    #idData {
    color: red;border: solid;text-align: center;}
    a{
    text-decoration: none;}
 </style>
</head>
<body onLoad="goPage(1,10);">
    <table id="idData" width="70%">        
        <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><