jQuery 分页插件 jPages 使用

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

jQuery 分页插件 jPage实现了javascript分页。操作很傻瓜，在此记录一下。

 使用方式如下：

1.引入头文件（注意一定要把jQuery放在前面）：

此处使用了动画效果

<!-- 使用插件的时候一定要引入jQuery！！！--><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><!-- jPage -->  <link rel="stylesheet" href="css/jpage/jPages.css"/>  <link rel="stylesheet" href="css/jpage/animate.css"/>  <script src="js/jpage/jPages.min.js"></script>   <script>  $(function(){    $("div.holder").jPages({      containerID : "itemContainer",      previous : "←",      next : "→",      perPage : 20,      delay : 100    });  });</script>

2.需要分页的<table>的<tbody>上（注意：不一定非得是<table>，也可以是<ul>等）的id标记为“itemContainer”，表明这里面放的是一行一行的内容。

class属性为“holder”的<div>用于放置“1”“2”“3”或者“Next”这类的导航链接。

注：本代码直接从SSH项目中拷贝出来，因此有EL等标签，可以忽略。

<div class="post_section">  <h3>管理员信息</h3> <div class="holder"></div> <table id="alltable" cellspacing="0" class="tablesorter"> <thead>  <tr>   <th>ID</th>   <th>登录名</th>   <th>姓名</th>   <th>级别</th>   <th>操作</th>  </tr>  </thead>  <tbody id="itemContainer">  <c:forEach items="${alladmin}" var="admin">  <tr>       <td>${admin.id}</td>   <td>${admin.loginname}</td>   <td><a href="AdminReadByID_Admin2Action.action?adminid=${admin.id}">${admin.name}</a></td>   <td>${admin.level}</td>   <td><a href="AdminReadByID_Admin2Action.action?adminid=${admin.id}">查看</a>|    <a href="AdminEditRead_Admin2Action.action?adminid=${admin.id}">编辑</a>|    <a class="confirm" href="AdminDelete_Admin2Action.action?adminid=${admin.id}">删除</a>   </td>  </tr>  </c:forEach>  </tbody> </table> </div>

jPages项目主页： http://luis-almeida.github.io/jPages/index.html

jPages下载：http://download.csdn.net/detail/leixiaohua1020/6376509

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow