当前位置:编程学习 > JAVA >>

jQuery 分页插件 jPages 使用

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>  

 

 
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,