jpages插件如何在一个页面给多个table分页（切换tab页时，每个tab页下都有一个table）

在一个页面中有多个Tab的问题可以这样来处理：

参照

工程项目管理/单位工程项目完工管理/申请列表

比如在此页面中有三个Tab切换：

那么要拆成四个页面一个Mange+三个Tab的页面

1、Manage页面：在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。

<div class="page">

<div class="pageContent">

<div class="tabs" currentindex="2" eventtype="click">

<div class="tabsHeader">

<div class="tabsHeaderContent">

<ul>

<li><a href="aaspx" class="j-ajax"

><span>名称1</span></a></li>

<li><a href="baspx" class="j-ajax"

><span>名称2</span></a></li>

<li><a href="caspx" class="j-ajax"

><span>名称3</span></a></li>

</ul>

</div>

</div>

<div class="tabsContent" >

<div id="tab1"></div>

<div id="tab2"></div>

<div id="tab3"></div>

</div>

</div>

</div>

</div>

2、其他的三个页面的格式为：

<div class="panelBar">

<form id="pagerForm"

action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspx"

method="post">

<input type="hidden" name="status" value="active"/>

<input type="hidden" name="pageNum" />

<input type="hidden" name="numPerPage" value="<%=numPerPageValue%>" />

</form>

<ul class="toolBar">

<li><a class="delete"

href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspxfuid={sid_fin}"

target="navTabTodo"

title="确定要反审核吗"><span>反审核</span></a></li> </ul>

</div>

<table class="table" layouth="138">

</table>

<div class="panelBar">

<div class="pages">

<span>显示</span>

<select id="numPerPage" runat="server"

onchange="tabPageBreak(gpagejObj('tab2'),{numPerPage:thisvalue})">

<option value="3" selected="selected">3</option>

<option value="20">20</option>

<option value="30">30</option>

<option value="50">50</option>

</select>

<span>条，共<%=total %>条</span>

</div>

<div class="pagination" targettype="navTab" totalcount="<%=total

%>" numperpage="<%=numPerPageValue %>" currentpage="<%=pageNum %>" tab="tab2">

</div>

</div>

3、在其他的三个页面中一开始就应该写<div class="panelBar"></div

class="panelBar">，前面的样式不需要，因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。

比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面，不会加载的。

4、对于分页因为涉及到多个Tab的同时分页的问题，但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，

所以现在我们拆开来处理。里面的分页稍作了修改，以前我们用navTabPageBreak()；现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。

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

使用方式如下：

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

此处使用了动画效果

<!-- 使用插件的时候一定要引入jQuery！！！-->

<script type="text/javascript" src="js/jquery-183minjs"></script>

<!-- jPage -->

<link rel="stylesheet" href="css/jpage/jPagescss"/>

<link rel="stylesheet" href="css/jpage/animatecss"/>

<script src="js/jpage/jPagesminjs"></script>

<script>

$(function(){

$("divholder")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>${adminid}</td>

<td>${adminloginname}</td>

<td><a href="AdminReadByID_Admin2Actionactionadminid=${adminid}">${adminname}</a></td>

<td>${adminlevel}</td>

<td><a href="AdminReadByID_Admin2Actionactionadminid=${adminid}">查看</a>|

<a href="AdminEditRead_Admin2Actionactionadminid=${adminid}">编辑</a>|

<a class="confirm" href="AdminDelete_Admin2Actionactionadminid=${adminid}">删除</a>

</td>

</tr>

</c:forEach>

</tbody>

</table>

</div>

Web开发人员每天都使用JavaScript为他们创建的网站带来必要的功能。jQuery提供了一个提供强大功能和灵活性的特殊工具。jQuery是一个JavaScript库，有助于简化和标准化JavaScript代码和HTML元素之间的交互。JavaScript允许网站具有交互性和动态性，jQuery是一种有助于简化流程的工具。

同时JQuery也是一个紧凑，快速且功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和 *** 作，事件处理，动画和Ajax更加简单。JQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。换句话说，由于JQuery，JavaScript以简化形式呈现。阅读起来相当舒服。

扩展资料：

JQuery的优点

1、易于使用：如果我们将它与标准JavaScript和其他库进行比较，它使用起来既简单又快捷。它由简单的语法组成，并且需要较少的代码行。

2、巨大的库：与其他库相比，它允许您执行大量功能。

3、插件的可用性：可以使用许多预先编写的插件来立即压缩开发过程。这背后的另一个优点是脚本的效率和安全性。

4、综合教程： JQuery网站提供了不言自明的文档和教程，以便在绝对的编程初学者面前进行理解。

5、AJAX支持：它允许我们轻松地开发Ajax模板，Ajax支持更流畅的界面，可以在页面上执行 *** 作，而不需要重新加载整个页面。

6、灵活性：所有浏览器中的契约，是目前最流行的JavaScript库。

extjs 中美哦与 jPages吧 , 那个是JQery的吧

extjs分页一般都是表格 , 可以用 ExttoolbarPaging , 绑定store