javascript分页问题，给点思路

codeName_Armor 2009-12-02 03:47:02
情况如下
要求查询出来的数据表格分页，要命的是表格中有多选框，现在我解决不了的就是多选框的处理，比如说，分页每页5条记录，用户在查询出的第一页中选中了2个多选按钮，再第三页选了4个多选按钮，最后又到第一页取消了那2个按钮，最后点个提交应该只提交第三也的那4条记录，我现在实现不了，分页只有当前页的数据，点击了下一页或上一页当前页的数据就没了，不知道如何做，请赐教 。
...全文
115 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
真哥哥 2009-12-02
  • 打赏
  • 举报
 回复
用array.push()，在点下一页的时候将当前页面被选中的内容加入到array,提交时，传array
龙行-天下 2009-12-02
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 vvviop 的回复:]
你可以把 各个分页的内容 分别存在不同的div里。

点击分页的时候，显示 那个分页内容div 隐藏其他分页内容div

这样各个分页内容就互不相影响了。
[/Quote]

分页多了的时候，这样性能就会很差了，不太合适
jdk150 2009-12-02
  • 打赏
  • 举报
 回复
我相信每条记录都有一个唯一的ID
用一个隐藏域来记录这些选中的ID
第一页选中1，3第二页选中5，7
那么隐藏域的值就是1,3,5,7
回到第一页取消3，隐藏域的值变成1,5,7
实现起来不难的
wj469288588 2009-12-02
  • 打赏
  • 举报
 回复
做一个事件处理：
当用户选中按钮时，就把选中的值添加到一个指定的对象里面去，
当用户取消选中时，就查找一下指定对象里面是否包含这个值，有则删除。
最后直接去取指定对象里面的值列表就行了。
wisword 2009-12-02
  • 打赏
  • 举报
 回复
用控制css样式的margin-top实现分页可以解决你的问题
cntmi 2009-12-02
  • 打赏
  • 举报
 回复
这个事你要的效果吧，JavaScript分页


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>表格分页显示</title>



</head>



<body>

<div id="divTable">

<table  border="1" cellpadding="0" cellspacing="0" id="tab1">

<tbody><tr>

<td width="73"> 状态</td>

<td width="73"> 序号</td>

<td width="223"> 标题</td>

<td width=80> 作者</td>

<td width=100> 发表时间</td></tr>



<tr height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">00</td>

<td width="223" align="left"><a href="###">00</a></td>

<td width=80>00</td>

<td width=100>00</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">11</td>

<td width="223" align="left"><a href="###">11</a></td>

<td width=80>11</td>

<td width=100>11</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">22</td>

<td width="223" align="left"><a href="###">22</a></td>

<td width=80>22</td>

<td width=100>22</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">33</td>

<td width="223" align="left"><a href="###">33</a></td>

<td width=80>33</td>

<td width=100>33</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">44</td>

<td width="223" align="left"><a href="###">44</a></td>

<td width=80>44</td>

<td width=100>44</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">55</td>

<td width="223" align="left"><a href="###">55</a></td>

<td width=80>55</td>

<td width=100>55</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">66</td>

<td width="223" align="left"><a href="###">66</a></td>

<td width=80>66</td>

<td width=100>66</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">77</td>

<td width="223" align="left"><a href="###">77</a></td>

<td width=80>77</td>

<td width=100>77</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">88</td>

<td width="223" align="left"><a href="###">88</a></td>

<td width=80>88</td>

<td width=100>88</td></tr>



<tr  height="20">

<td width="73"><input type="checkbox" name="status"></td>

<td width="73">99</td>

<td width="223" align="left"><a href="###">99</a></td>

<td width=80>99</td>

<td width=100>99</td></tr>

</table>

</div>

<br>

<input id="first" type=button value="第一页" onclick="firstOrLast(0)">

<input id="back" type=button value="上一页" onclick="N(-1)">

<input id="next" type=button value="下一页" onclick="N(1)">

<input id="last" type=button value="最后一页" onclick="firstOrLast(1)">

<script language="javascript">

<!--

var pageSize=4,currentPageNum=1,totlePageNum

var obj,totleRows,totleCols

var rowHeigth = 20;

var obj=document.getElementById('tab1').rows;

onload=function(){

    

    totleRows=obj.length;

	totleCols=document.getElementById('tab1').rows(0).cells.length; 

    totlePageNum=Math.ceil((totleRows-1)/pageSize)

	//如果某一页行数小于pageSize，则增加空行

	if(totleRows==0 || (totleRows-1)%pageSize != 0){

		var tempCols

		if(totleRows==0)

			tempCols = totleCols;

		else tempCols = pageSize-(totleRows-1)%pageSize;

		for(i=0;i<tempCols;i++){

			var newBlankRow = document.getElementById('tab1').insertRow();

			var point = newBlankRow.rowIndex;

			for (m=0; m < totleCols; m++) {

                obj[point].insertCell();

                obj[point].cells(m).innerHTML = " ";

			}

		}

	totleRows = document.getElementById('tab1').rows.length;

	}



    N(0)

}

function resetStyle(){

    for (var i=1;i<totleRows;i++)obj[i].style.display="none"

}

function N(k){

    if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return;

    currentPageNum+=k;

    resetStyle();

    toPage(currentPageNum);

	filter(currentPageNum);

}

function firstOrLast(flag){

	if(flag==0)

		currentPageNum = 1;

	else if(flag==1)

		currentPageNum = totlePageNum;

	else

		return ;

	resetStyle();

	toPage(currentPageNum);

	filter(currentPageNum);



}





function toPage(currentPageNum){

	 for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++)

		obj[i].style.display="";

}



function filter(currentPageNum){

		//如果是第一页，则“上一页”不可用

	if(currentPageNum-1<1) {

		document.getElementById("back").disabled=true;

		document.getElementById("first").disabled=true;

	}

	else{

		document.getElementById("back").disabled=false;

		document.getElementById("first").disabled=false;

	}

	//如果是最后一页，则"下一页"不可用

	if(currentPageNum+1>totlePageNum ) {

		document.getElementById("next").disabled=true;

		document.getElementById("last").disabled=true;

	}

	else{

		document.getElementById("next").disabled=false;

		document.getElementById("last").disabled=false;

	}

}

//-->

</script>



</body>



</html>
千游 2009-12-02
  • 打赏
  • 举报
 回复
用一个二维数组吧，长度和总页数相同
var arr = [['0','0','0','0','0','0'],['0','0','0','0','0','0'],['0','0','0','0','0','0']];
选中时 就把相应那一项置为1，提交时对数组遍历一下就行了，这个方法似乎很笨，呵呵！
vvviop 2009-12-02
  • 打赏
  • 举报
 回复
你可以把 各个分页的内容 分别存在不同的div里。

点击分页的时候，显示 那个分页内容div 隐藏其他分页内容div

这样各个分页内容就互不相影响了。
javascript分页代码(当前页码居中)
昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个显示页码个数的属性 showPageNum
基于vue20封装的一个分页组件
文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
基于JavaScript实现移动端无限加载分页
本文实例为大家分享了js实现移动端无限加载分页的具体代码，供大家参考，具体内容如下 原理：当滚动条到达底部时，执行下一页内容。 判断条件需要理解三个概念：     1.scrollHeight 真实内容的高度     2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度     3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离 思路：     1.使用fixed定位加载框     2.使用$(window).scroll();方法来触发是否加载     3.通过 真实内容高度 – 视窗高度 – 上面隐藏部分 < 10 ,作为加载触发的条件 代码样例 v
jive.chm

系统设计
1 jive设计思路
2 jive的工作内幕
3 Jive源代码研究
4 Jive中的设计模式
5 jive学习笔记



设计模式
1 大道至简-Java之23种模式一点就通
2 设计模式宝典




数据库设计
1 Jive Forums数据库说明(英文)
2 Jive KB数据库说明(英文)
3 Jive Forums KB数据库说明(中文)
4 Jive Forums KB合并数据库脚本(MSSQL)
5 Jive Forums KB合并数据库脚本(Oracle)
6 Jive Forums KB合并数据库脚本(MySql)
7 使用XML封装数据库操作语句的实现
8 Database Package下面的暗黑世界
9 Jive树形结构视图(Treewalker)
10 有时候threadID并不是连续的
11 jsp连接数据库大全
12 OOD需要数据库设计吗？
13 JDBC性能优化技巧



权限设计
1 权限系统概要
2 关于权限设计方面的问题
3 关于用户角色权限管理一点想法
4 关于权限系统的设计



缓存系统
1 剖析Jive的缓存机制
2 jcs学习笔记
3 关于Hibernate的Cache问题
4 用缓冲技术提高JSP应用的性能和稳定性
5 SwarmCache入门



源代码研究
1 Jive中的全局配置
2 Jive源代码情景分析-index.jsp
3 Jive源代码情景分析-forum.jsp
4 Jive源代码情景分析-过滤器篇
5 jive每日一步-web.xml
6 全面了解Jive中的ID机制
7 tree树形数据结构



扩展功能
1 为jive3.x写ColorFilter
2 Jive中的分页处理
3 Jive中Jdom使用剖析
4 丰富的图释
5 使用正则表达式让你的jive显示图片
6 Jive3增加帖子的点击功能的高效方法



国际化支持
1 jive_forums_i18n_zh_CN_ori.properties
2 jive_forums_i18n_zh_CN.properties
3 资源汉化方法
4 Jive的中文问题及解决办法
5 Java程序的国际化和本地化介绍
6 Java的i18n问题
7 Java国际化——资源包的使用
8 国际化
9 Supported Encodings
10 native2ascii - Native-to-ASCII Converter
11 Jive 3.x UTF-8中文附件问题
12 JF3.1.3 JKB1.0.2 中文化
13 Jive3.0.8 MYSQL的中文解决方案
14 jive_kb_i18n_zh_CN_ori.properties



全文搜索
1 使您的Jive搜索支持中文
2 关于Jive2中的中文搜索
3 基于JAVA的全文索引引擎Lucene简介



安全认证
1 Jive2.1.1 License保护原理分析
2 用Java的加密机制来保护你的数据
3 在java中编程实现数字签名系统
4 关于Jive1中的验证和相关类的调用

5 MD5的加密算法(JavaScript)



产品介绍
1 Jive简介

Jive Forums
1 Jive Forums特性
2 Jive Forums Changelog

Jive KB
1 Jive Knowledge Base特性
2 Jive Knowledge Base Changelog



系统缺陷
1 Jive的硬伤
2 查询的Bug



安装配置
1 Jive Forum KB的license
2 MakeWAR.jar文件中的MakeWAR.class源代码MakeWAR.java
3 为Jive写的补丁程序patcher.jar的源程序
4 WebLogic中文问题配置文件
5 JSP系统信息配置探针



反编译与混淆
1 編譯、反編譯、反反編譯

反编译
1 反编译常用工具

混淆
1 Sun公司的混淆器JADE
2 RetroGuard的使用方法

JVM
1 JVM之class文件结构
2 JVM 內的資料處理



MVC Framework
1 应用Struts的网站建设



Java基础
1 20个Java基础Tips
2 abstract,static,final修饰符
3 ChinaUnix.net Java精华贴
4 ANT学习笔记
5 极度性能调整


FAQs
1 关于ConnectionManager中的代码
2 关于FORUMFactory的几个疑问
3 研究哪个版本的jive最合适
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章