mui中table的假分页

最新推荐文章于 2024-05-16 00:19:21 发布

原创最新推荐文章于 2024-05-16 00:19:21 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的网页分页实现方案，通过HTML与JS结合来控制页面显示的数据条数及翻页功能，适用于初学者理解分页的基本原理。

来看一下效果。

html代码。

        <div style="margin-top: 20px;">
            <a href="#" id="btn0" style="font-size:13px">共x页</a>
               <a href="#" id="btn8" style="font-size:13px">每页8条记录</a>
               <a href="#" id="btn9" style="font-size:13px">第x页</a>
               <a href="#" id="btn1" onclick="searchInfo()" style="font-size:13px">首页</a>
             <button id="btn2" type="button" style="border:none;color: #4D7AFE; font-size:13px;width:auto; height:auto;margin-top:-5px" onclick="last()">上一页</button>
             <button id="btn3" type="button" style="border:none;color: #4D7AFE; font-size:13px;width:auto; height:auto;margin-top:-5px" onclick="next()">下一页</button>
              

        </div>

我的这个假分页是怎么做到呢？在js中固定了每页的条数，设置了8条。然后在js中得到数据，根据8条得到这个页数。

在点击下一页或上一页中，先得到当前的页数，然后在把当前的页数在加一或减一。然后在根据页数显示相应的条数。

在js中用了大量的公共变量。