JS对列表的分页和 Table的分页_分别tabpage页列表-优快云博客

本文介绍了一种基于JavaScript的网页分页插件实现方法，适用于列表和表格数据的分页展示。该插件能够自动计算分页逻辑，并提供友好的用户交互界面，包括上下页导航及页码跳转等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <mce:script language="JavaScript"></mce:script> </head> <body> <div>li 列表分页</div> <div id="div_test1"> <ul id="ul1temp" style="display:none" mce_style="display:none"> <li>1.新区至尊公会PK</li> <li>2.新区至尊公会PK</li> <li>3.新区至尊公会PK</li> <li>4.新区至尊公会PK</li> <li>5.新区至尊公会PK</li> <li>6.新区至尊公会PK</li> <li>7.新区至尊公会PK</li> </ul> <ul id="ul1"> <li>加载中...</li> </ul> <div id="divpage1"></div> <mce:script language="javascript" type="text/javascript"></mce:script> </div> <div id="div_test2"> 不够8个补够8个，且<li>......</li>有class样式。 <ul id="ul2temp" style="display:none" mce_style="display:none"> <li class="show">1.新区至尊公会PK</li> <li class="show">2.新区至尊公会PK</li> <li class="show">3.新区至尊公会PK</li> <li class="show">4.新区至尊公会PK</li> <li class="show">5.新区至尊公会PK</li> <li class="show">6.新区至尊公会PK</li> <li class="show">7.新区至尊公会PK</li> <li class="show">8.新区至尊公会PK</li> <li class="show">9.新区至尊公会PK</li> <li class="show">10.新区至尊公会PK</li> </ul> <ul id="ul2"> <li>加载中...</li> </ul> <div id="divpage2"></div> <mce:script language="javascript" type="text/javascript"></mce:script> </div> <div>Table分页</div> <div id="div_test3"> <table id="TableList"> <tr><td>1.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>2.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>3.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>4.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>5.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>6.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>7.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>8.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>9.新区至尊公会PK</td><td>(111)</td></tr> <tr><td>10.新区至尊公会PK</td><td>(111)</td></tr> </table> <div id="divpage"></div> <mce:script type="text/javascript" defer="defer"></mce:script> </div> </body> </html>