一个非常好用的Jquery表格分页插件——jPages

插件下载地址 :https://github.com/luis-almeida/jPages

在网上找了很多分页插件,但用法都比较复杂,不利于新手的学习,而这一款,从下面的代码就可以看出使用起来比较方便简洁。此款插件的最大好处在于,不管表格是静态生成的,还是由程序动态生成的,它都可以给分页,用着十分爽。

由于其工作原理是先将表格一次性全部加载到客户端, 然后再将完整的表格拆分成多页进行显示,所以我认为对于行数十分庞大的表格,此插件并不适用,可能会导致加载过慢。

<link rel="stylesheet" href="css/jPages.css"> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
<script src="js/jPages.js"></script>
 <script>
  $(function(){
    $("div.holder").jPages({
      containerID : "movies", //存放表格的窗口标签ID
      previous : "←", //指示首页的按钮
      next : "→",//指示尾页的按钮
      perPage : 15,//每页显示表格的行数
      delay : 20 //分页时动画持续时间,0表示无动画
    });
  });
  </script>
<div class="holder"></div>//这里显示分页导航

      <table border="1">
        <thead><tr><th>Rank</th><th>Rating</th><th>Title</th><th>Votes</th></tr></thead>
        <tbody id="movies">
        	<script>
            	for(i=1;i<=100;i++)
		{
			$("#movies").append("<tr><td>i</td><td>i</td><td>i</td><td>i</td></tr>");
		}
            </script>
        </tbody>
      </table>

    </div> <!--! end of #content -->
  </div> <!--! end of #container -->

最终结果:


  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值