关于js的分页问题

问题描述

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><SCRIPT LANGUAGE="JavaScript"><!--function insertStr(){var strs = document.getElementById("strid").value;var str =ttt.value;strs = strs+str+";"alert(strs); document.getElementById("strid").value = strs;instStr(1);}//--></SCRIPT> <body onload="instStr(1)"> <INPUT TYPE="hidden" NAME="" id="strid" value="你好1;你好2;你好3;你好4;你好5;你好6;你好7;你好8;你好9;你好10;你好11;你好12;你好13;你好14;你好15;你好16;你好17;你好18;你好19;你好20;你好21;你好22;你好23;你好24;你好25;你好26;你好27;你好28;你好29;你好30;你好31;你好32;你好33;你好34;你好35;你好36;你好37;你好38;你好39;你好40;你好41;"></TEXTAREA> <TABLE id="recordTable" border="1"> </TABLE> <span id="span1"></span><br/> <INPUT TYPE="text" NAME="ttt" id="ttt"> <INPUT TYPE="button" VALUE="添加" ONCLICK="insertStr()"> </body> <script type="text/javascript">function instStr(spanid){var str = document.getElementById("strid").value;//alert(str);//字的总集合var strArray = str.split(";");//页数var page =spanid;end = (page-1)*4+4;var sumPage = Math.round((strArray.length-1)/4 );if(Math.round((strArray.length-1)/4 )>0)sumPage = sumPage+1;var strrs="";for(k = 1; k <= sumPage; k++){if(k==1)strrs +="<span id='"+k+"' onclick='instStr("+k+")'>首页</span>";else{if(k==sumPage){strrs +="<span id='"+k+"' onclick='instStr("+k+")'>末页</span>";}elsestrrs +="<span id='"+k+"' onclick='instStr("+k+")'>"+k+"</span>";}}document.getElementById("span1").innerHTML=(strrs);if(page==sumPage){ strrs = " <TABLE id='recordTable' border='1'> </TABLE> ";for(i = (page-1)*4;i < strArray.length-1;i++){if(Math.round(i/2)>0) var row = recordTable.insertRow(recordTable.rows.length); var col = row.insertCell(0); col.innerHTML = "<span id='"+i+"' name='"+strArray+"'value='"+strArray[i]+"' onclick='strPage()'>"+strArray[i]+"</span>"; } alert(page);}else{for(i = (page-1)*4;i < end;i++){if(i%2==0) var row = recordTable.insertRow(recordTable.rows.length); var col = row.insertCell(0); col.innerHTML = "<span id='"+i+"' name='"+strArray[i]+"'value='"+strArray[i]+"' onclick='strPage()'>"+strArray[i]+"</span>"; }}}function strPage(){var str= document.getElementById(1).value;alert(str);}</script></html>[i]谢谢高手请指点一下为什么每次点击下一页的时候总是在下面加而不是直接显示那一页的内容呢。请帮忙解决一下。问题补充：问题解决了删除了前面的行了，可是到了最后一页的时候就变样了，这是为什么呢问题补充：是我没有复制好！！谢谢了！！解决了！！！！：）

解决方案

贴个js的好像没问题^_^
解决方案二：
好像code的html格式有点问题，我贴的removeAllRows()里面的参数名怎么double了，bug？？？function removeAllRows(){ var rowNum=recordTable.rows.length; for (i=0;i<rowNum;i++) { recordTable.deleteRow(i); rowNum=rowNum-1; i=i-1; } }
解决方案三：
因为换页instStr()函数每次都是insertRow，而没有把以前的row清掉，所以一直都是递增了<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><SCRIPT LANGUAGE="JavaScript"><!--function insertStr(){var strs = document.getElementById("strid").value;var str =ttt.value;strs = strs+str+";"alert(strs);document.getElementById("strid").value = strs;instStr(1);}//--></SCRIPT><body onload="instStr(1)"><INPUT TYPE="hidden" NAME="" id="strid" value="你好1;你好2;你好3;你好4;你好5;你好6;你好7;你好8;你好9;你好10;你好11;你好12;你好13;你好14;你好 15;你好16;你好17;你好18;你好19;你好20;你好21;你好22;你好23;你好24;你好25;你好26;你好27;你好28;你好 29;你好30;你好31;你好32;你好33;你好34;你好35;你好36;你好37;你好38;你好39;你好40;你好41;"><TABLE id="recordTable" border="1"></TABLE><span id="span1"></span><br/><INPUT TYPE="text" NAME="ttt" id="ttt"><INPUT TYPE="button" VALUE="添加" ONCLICK="insertStr()"></body><script type="text/javascript">function instStr(spanid){var str = document.getElementById("strid").value;// alert(str);//字的总集合var strArray = str.split(";");//页数var page =spanid;end = (page-1)*4+4;var sumPage = Math.round((strArray.length-1)/4 );if(Math.round((strArray.length-1)/4 )>0)sumPage = sumPage+1;var strrs="";for(k = 1; k <= sumPage; k++){if(k==1)strrs +="<span id='"+k+"' onclick='instStr("+k+")'>首页</span>";else{if(k==sumPage){strrs +="<span id='"+k+"' onclick='instStr("+k+")'>末页</span>";}elsestrrs +="<span id='"+k+"' onclick='instStr("+k+")'>"+k+"</span>";}}document.getElementById("span1").innerHTML=(strrs);if(page==sumPage){strrs = " <TABLE id='recordTable' border='1'> </TABLE> ";removeAllRows();for(i = (page-1)*4;i < strArray.length-1;i++){if(Math.round(i/2)>0)var row = recordTable.insertRow(recordTable.rows.length);var col = row.insertCell(0);col.innerHTML = "<span id='"+i+"' name='"+strArray+"'value='"+strArray[i]+"' onclick='strPage()'>"+strArray[i]+"</span>";}alert(page);}else{removeAllRows();for(i = (page-1)*4;i < end;i++){if(i%2==0)var row = recordTable.insertRow(recordTable.rows.length);var col = row.insertCell(0);col.innerHTML = "<span id='"+i+"' name='"+strArray[i]+"'value='"+strArray[i]+"' onclick='strPage()'>"+strArray[i]+"</span>";}}}function strPage(){var str= document.getElementById(1).value;alert(str);}function removeAllRows(){ var rowNum=recordTable.rows.length; for (i=0;i<rowNum;i++) { recordTable.deleteRow(i); rowNum=rowNum-1; i=i-1; } }</script></html>

时间： 2024-11-01 15:53:42

关于js的分页问题的相关文章

神奇-js中分页，第一次点下一页时没问题，总共13页，第二次点击下一页的时候就出错

问题描述 js中分页,第一次点下一页时没问题,总共13页,第二次点击下一页的时候就出错 function(param currentpage totalPage){ alert(""currentpage:""+currentpage);//2 alert(""totalPage:""+totalPage);//13 alert( currentpage > totalPage ) alert( currentpage

7种增加网站用户体验的JS脚本分页代码

网页设计中,要考虑的方面很多,当然,大体来说就是两类:代码+UI,简洁的代码加上美观的UI,是一个网站理想的选择,一个网站设计成功与否,很 多时候要从细节入手,关注细节,才能关注用户体验,用户体验的友好,才能说明网站的设计是成功的,下面分享7种JS脚本分页代码,让细节到从内容页面的分 页上来,高手可以飘过,这是写给不懂JS的朋友看的. <script language="JavaScript"> <!-- /* 7种分页脚本定义 ===================

锋利的js前端分页之jQuery

原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize

Javascript vue.js表格分页，ajax异步加载数据_基础知识

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

Asp.Net之JS生成分页条的方法_javascript技巧

Default.aspx.cs中的代码 protected int pageIndex = 1; protected int pageSize = 10; protected int pageCount = 100; protected string name = string.Empty; protected void Page_Load(object sender, EventArgs e) { int.TryParse(Request.QueryString["pageIndex"

js脚本分页代码分享（7种样式）_javascript技巧

本文跟大家分享了7种JS脚本分页样式,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下------------------运行效果------------------- 其实小编挺喜欢最后一款的,亲,你呐? 为大家再分享实现JS脚本分页的代码,直接复制代码,运行即可,抓紧试试吧 <html> <head> <title>7种JS脚本分页代码</title> <style> body {font-size: 12px;} /* Pages Mai

js控制分页打印、打印分页示例

 分页打印的实现方法有很多,本文为大家介绍的使用js来完成这个需求,感兴趣的朋友可以参考下 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q

利用js制作html table分页示例(js实现分页)_javascript技巧

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript">            var pageSize = 15;    //每页显示的记录条数             var curPage=0;        //当前页             var lastPage;        //最后页             var

vue.js表格分页示例_javascript技巧

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

js控制分页打印、打印分页示例_javascript技巧

复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu