<%@page contentType="text/html;charset=GBK"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<script language=javascript
src="<%=request.getContextPath()%>/js/systemAdmin.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<table width="950" height="68%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="15" background="images/lineleft_bk_1.jpg"> </td>
<td align="center" valign="top" bgcolor="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="kuang01">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="30" align="center" background="images/mainbg.jpg" class="font2">商户名称</td>
<td width="20%" align="center" background="images/mainbg.jpg" class="font2">帐户类型</td>
<td width="17%" align="center" background="images/mainbg.jpg" class="font2">发生前余额(元)</td>
<td width="17%" align="center" background="images/mainbg.jpg" class="font2">操作类型</td>
<td width="10%" align="center" background="images/mainbg.jpg" class="font2">发生金额(元)</td>
<td width="20%" align="center" background="images/mainbg.jpg" class="font2">发生时间</td>
</tr>
<tr><td colspan="6">
<table id="v_details" width="100%" border="0" cellpadding="0" cellspacing="0">
<logic:present name="pageSupport" scope="request">
<logic:iterate id="vad" property="items" name="pageSupport" indexId="number">
<tr id="${number}">
<td width="16%" align="center" height="24"> ${vad.cust_name } </td>
<td width="20%" align="center"> ${vad.acc_type } </td>
<td width="17%" align="center"> ${vad.before_money } </td>
<td width="17%" align="center"> ${vad.oper_type } </td>
<td width="10%" align="center"> ${vad.oper_money } </td>
<td width="20%" align="center"> ${vad.oper_date } </td>
</tr>
</logic:iterate>
</logic:present>
</table>
</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" width="100%" cellspacing="0" border="0" cellpadding="0" class="font5">
<tr>
<td align="center" class="pagebottom" height="40" class="font3" bgcolor="FFF0DE">
<html:select name="pageSupport" property="pageSize" styleId="pageSize" onchange="processPage()">
<html:option value='10'>10</html:option>
<html:option value='20'>20</html:option>
</html:select>
<span class="font2">第 <em id="currentPage">${pageSupport.currPage }</em> 页||
共 <em id="totalPages">${pageSupport.totalPages}</em> 页||共 ${pageSupport.totalCount }条数据 </span>
<input type="button" id="first" value="首页" class="sbttn"
onClick="processFirstPage()" >
<input type="button" id="previous" value="上一页" class="sbttn"
onClick="processPreviousPage()" disabled="disabled">
<input type="button" id="next" value="下一页" class="sbttn"
onClick="processNextPage()">
<input type="button" id="end" value="末页" class="sbttn"
onClick="processEndPage()">
</td>
</tr>
</table>
</td>
</tr>
</table></td>
<td width="8" background="images/lineright_bk_1.jpg"> </td>
</tr>
</table>
<script language="javascript">
var pageSize = ${pageSupport.pageSize};
var totalCount = ${pageSupport.totalCount};
var totalPages = ${pageSupport.totalPages};
var currentPageIndex = 1;
showPages();
function processFirstPage(){
currentPageIndex = 1;
showPages();
//checkPagesDisabled();
}
function checkPagesDisabled(){
if(currentPageIndex != 1){
$("first").disabled = "";
$("previous").disabled = "";
}else{
$("first").disabled = "disabled";
$("previous").disabled = "disabled";
}
if(currentPageIndex != totalPages){
$("next").disabled = "";
$("end").disabled = "";
}else{
$("next").disabled = "disabled";
$("end").disabled = "disabled";
}
}
function processPreviousPage(){
currentPageIndex = currentPageIndex - 1;
showPages();
}
function processNextPage(){
currentPageIndex = currentPageIndex + 1;
showPages();
}
function processEndPage(){
currentPageIndex = totalPages;
showPages();
}
function processPage() {
var pageIndex = $("pageSize").value;
totalPages = Math.floor(totalCount/pageIndex) + (totalCount%pageIndex==0 ? 0:1);
pageSize = pageIndex;
currentPageIndex = 1;
showPages();
}
function showPages(){
var startIndex = (currentPageIndex - 1) * pageSize;
var endIndex = currentPageIndex * pageSize;
//判断是否为火狐浏览器
var ff = !(document.all) ;
var table = $("v_details");
for(i=0;i< totalCount; i++){
//隐藏行,IE与火狐均可用
table.rows[i].style.display="none";
if( i < endIndex && i >= startIndex){
if(ff){
//火狐兼容显示行
table.rows[i].style.display="table-row";
}else{
//IE兼容显示行
table.rows[i].style.display="block";
}
}
}
$("currentPage").innerHTML = currentPageIndex;
$("totalPages").innerHTML = totalPages;
checkPagesDisabled();
}
</script>
分享到:
相关推荐
总的来说,JavaScript分页实现需要前端与后端的协同工作。前端负责用户交互和数据更新,后端则负责数据的处理和返回。结合Spring框架,我们可以方便地在服务端处理分页逻辑,提供高效且易于维护的分页解决方案。同时...
这个项目的实践价值在于提供了一个基础的JavaScript分页实现,可以帮助开发者更好地理解和应用分页技术。 总之,JavaScript分页是一个涉及数据处理、DOM操作、事件处理和样式设计等多个方面的问题。通过这个项目,...
三、JavaScript分页实现步骤 1. 创建HTML结构:包括页码显示区域和导航按钮。 2. 初始化分页:根据总记录数和每页显示数量计算总页数,并显示第一页。 3. 监听事件:为导航按钮添加事件监听器,当用户点击时更新...
以下是对这个通用JavaScript分页实现的详细解析: 1. **变量定义**: - `totalNum`:总记录数,表示数据源中的条目总数。 - `maxNum`:每页显示的最大记录数,即每一页可以显示多少条数据。 - `pageUrl`:分页...
二、JavaScript分页实现 1. 数据获取:通常,服务器会提供接口,返回当前页的数据。JavaScript通过Ajax(异步JavaScript和XML)技术与服务器进行通信,获取所需数据。 2. 分页逻辑:JavaScript需要计算总页数,这...
通过以上分析,我们可以看到JavaScript分页实现的关键在于对数据集的分割、DOM元素的动态控制以及页码导航的生成。掌握这些技巧,将有助于开发者在Web项目中更好地管理数据展示,提升用户体验。在未来的学习和实践中...
二、基本的JavaScript分页实现 1. 创建HTML结构:构建分页的HTML元素,通常包括页码列表、上一页/下一页按钮等。 ```html 上一页 <span id="currentPage">1 下一页 <ul id="pageNumbers"></ul> ``` 2. ...
在实际应用中,JavaScript分页可以结合前端框架和库来简化实现,例如使用jQuery的`paginate`插件,React的`react-paginate`,Vue的`vue-paginate`等。这些库通常提供了丰富的配置项和预定义的样式,使分页功能更易于...
**JavaScript分页实现**,通常涉及到以下步骤: 1. **初始化**:设置每页显示的条目数、总数据量等参数。 2. **创建分页元素**:在HTML中添加页码和导航按钮。 3. **绑定事件**:为分页元素添加点击事件监听器。 4. ...
理解以上关键点,你就能实现一个基本的JavaScript分页模块。对于`Cls_jsPage.js`,需要查看其源代码了解具体的实现细节,如分页类的构造、方法以及如何与页面元素交互。在实际项目中,根据需求进行定制和优化,如...
二、JavaScript分页实现 1. HTML结构:首先,我们需要创建一个包含页码的HTML结构,通常包括上一页、下一页、页码列表和跳转至页码的输入框。 2. JavaScript变量:存储总条数、每页显示条数、当前页等信息。 3. 计算...
下面将详细介绍几种常见的JavaScript分页实现方式。 1. 基于DOM操作的简单分页 最基础的分页方法是通过JavaScript直接操作DOM元素来实现。首先,计算出总页数,然后根据当前页码动态创建或更新页面上的链接。用户...
2. **JavaScript分页实现思路** - **数据处理**:首先,需要对服务器获取到的数据进行处理,根据每页的显示数量切分成多个数组片段。 - **DOM操作**:创建分页组件的HTML结构,包括页码按钮和导航元素。 - **事件...
这个“一个非常精巧的javascript实现的Bootstrap分页插件”提供了无需依赖其他第三方类库的解决方案,使得开发者能够更轻松地在项目中集成分页功能。 首先,我们要理解什么是Bootstrap。Bootstrap是由Twitter推出的...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它...这个压缩包提供了一系列的JavaScript分页代码,无论你是新手还是经验丰富的开发者,都可以从中受益,学习如何在自己的网站上实现强大且高效的分页功能。
3. **JavaScript分页实现** - 使用JavaScript,可以监听用户的分页操作(如点击页码),然后更新DOM结构显示新的数据。 - 常用的分页算法有计算总页数、获取当前页数据等。 - 可以结合Ajax异步请求,获取服务器上...
JavaScript分页是网页开发中的一个常见功能,它用于在大量数据中进行页面间导航,以提高用户体验并优化页面加载速度。...希望这个案例能帮助你开启这段学习之旅,不断探索和优化你的JavaScript分页实现。
"10经典常用的js分页代码(开发必备)"这个资源集合了十个在实际开发中广泛使用的JavaScript分页实现方案。 1. **基础概念**:分页通常涉及到数据的动态加载,通过将大量数据分成若干页,每次只显示一部分,用户可以...
三、经典JavaScript分页实现 一个简单的JavaScript分页实现通常包括HTML结构、CSS样式和JavaScript逻辑三部分。以下是一个基础的分页代码示例: ```html <div id="pagination"></div> // 假设我们有50条数据,每...
综上所述,这个压缩包中的JS分页代码涵盖了JavaScript分页实现的基本原理和常见技术。开发者可以根据实际需求选择合适的代码,或者参考这些示例进行定制化开发,以创建符合自己项目需求的用户分页功能。