js控制每页输出表格的多少行的问题、

guolover 2010-07-11 09:20:14
表格有100行。默认分10页显示，没页10行。现在希望在首页加一个输入框，用户自己输入数字选择每页显示多少行。比如用户输入20。则本页显示20行、

烦劳各位高手给个解决的思路。
...全文
454 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
kukumayas 2010-08-15
  • 打赏
  • 举报
 回复 


//以下代码实现分页,主要思路是输入一个页码,对应的行style.display='',其余行='none'

var pagesize=10;

var totalrecno=document.getElementById("show").rows.length-1;

var currentpageno=1;

var totalpage=totalrecno%pagesize==0?(parseInt(totalrecno/pagesize)):(parseInt(totalrecno/pagesize+1));

function ppage()

{

	if(currentpageno==1)

	{

	}

	else

	{

		currentpageno=currentpageno-1;

		alterpage(currentpageno);

	}

}

function npage()

{

	if(currentpageno==totalpage)

	{

	}

	else

	{

		currentpageno=currentpageno+1;

		alterpage(currentpageno);

	}

}

function spage()

{

	var pageno=document.getElementById("pageNo").value;

	alterpage(pageno);

	

}

function alterpage(pageno)//核心

{

	var mytable=document.getElementById("show");

	mytable.rows[0].display='';

	var i=((pageno-1)*pagesize+1);

	for(var j=1;j<i;j++)

	{

		mytable.rows[j].style.display='none';

	}

	for(;i<=pageno*pagesize&&i<=totalrecno;i++)

	{

		mytable.rows[i].style.display='';

	}

	for(;i<=totalrecno;i++)

	{

		mytable.rows[i].style.display='none';

	}

}
kukumayas 2010-08-15
  • 打赏
  • 举报
 回复
//以下代码实现分页,主要思路是输入一个页码,对应的行style.display='',其余行='none'
var pagesize=10;
var totalrecno=document.getElementById("show").rows.length-1;
var currentpageno=1;
var totalpage=totalrecno%pagesize==0?(parseInt(totalrecno/pagesize)):(parseInt(totalrecno/pagesize+1));
function ppage()
{
if(currentpageno==1)
{
}
else
{
currentpageno=currentpageno-1;
alterpage(currentpageno);
}
}
function npage()
{
if(currentpageno==totalpage)
{
}
else
{
currentpageno=currentpageno+1;
alterpage(currentpageno);
}
}
function spage()
{
var pageno=document.getElementById("pageNo").value;
alterpage(pageno);

}
function alterpage(pageno)//核心
{
var mytable=document.getElementById("show");
mytable.rows[0].display='';
var i=((pageno-1)*pagesize+1);
for(var j=1;j<i;j++)
{
mytable.rows[j].style.display='none';
}
for(;i<=pageno*pagesize&&i<=totalrecno;i++)
{
mytable.rows[i].style.display='';
}
for(;i<=totalrecno;i++)
{
mytable.rows[i].style.display='none';
}
}
guolover 2010-07-14
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 xcf007 的回复:]
Ajax？
[/Quote]

jsp
guolover 2010-07-14
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 cntmi 的回复:]
你把前台
pagesize的值，传到后台去，再有

Java code

String rows=request.getParameter("page");
int record_per_page=Integer.parseInt(rows); //每页显示的记录数
int firstrecord_everypage=0; //当前页面所显示的第一条记录的索引


……
[/Quote]

是的。这样的话整个表格就不显示了。包括表头。请问我request.getParameter("page")是不是必须要先跳转到下一个页面才有效呢？ 我的这个语句是加在本页面的。。
碧海情天-赵亮 2010-07-14
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 guolover 的回复:]
int firstrecord_everypage=0; //当前页面所显示的第一条记录的索引

下面是我的查询语句：
String sql = "select RecvAccount,SenderAccount,RecvTime,MailTheme from TabGmailInbox order by RecvTime limit "+firstrecord_everypage+","+record_per_page+"";

[/Quote]
你这"当前页面所显示的第一条记录的索引",总是0,能对吗?
建议先找个封装好的分页类库.传参.有时间就看看人家怎么写的.
xcf007 2010-07-14
  • 打赏
  • 举报
 回复
Ajax？
cntmi 2010-07-14
  • 打赏
  • 举报
 回复
你把前台
pagesize的值，传到后台去，再有


String rows=request.getParameter("page");   

  int record_per_page=Integer.parseInt(rows); //每页显示的记录数

  int firstrecord_everypage=0; //当前页面所显示的第一条记录的索引

这个接收，然后查询，这样有问题吗？
zhengshibai 2010-07-14
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分！
xk1126 2010-07-14
  • 打赏
  • 举报
 回复
用jsp打个for循环不就搞定！
你到多少没有
passself 2010-07-13
  • 打赏
  • 举报
 回复
楼主你输入的数只是一个循环的最大数，楼主这个应该会吧
guolover 2010-07-13
  • 打赏
  • 举报
 回复
弱弱的问一句。一个循环的最大数。这个是什么意思？ 说具体点我应该怎么改呢？
guolover 2010-07-13
  • 打赏
  • 举报
 回复
没有明白。
这个是我选择每页多少行的语句：
<span><B>每页显示：</B>
<input type="text" style="width=40" value="10" name="page" id="pagesize">
<input type="button" value="确定" onclick="changePageSize();">
</span>

下面是我分页时动态传参数的语句：

String rows=request.getParameter("page");
int record_per_page=Integer.parseInt(rows); //每页显示的记录数
int firstrecord_everypage=0; //当前页面所显示的第一条记录的索引

下面是我的查询语句：
String sql = "select RecvAccount,SenderAccount,RecvTime,MailTheme from TabGmailInbox order by RecvTime limit "+firstrecord_everypage+","+record_per_page+"";

请问问题出在哪里呢？

你说的回发触发，麻烦你再仔细一点解释一下好不好？谢谢谢谢
諾临風 2010-07-13
  • 打赏
  • 举报
 回复
后台是不能那样操作的，其实，只需要回发事件去触发即可！更改一个查询的SQL就OK了，不知道你明白我的意思没有！
guolover 2010-07-12
  • 打赏
  • 举报
 回复
leejelen，你好，我按你说的改了分页显示每页行数的变量，是动态获取文本框的数据。但是这样做了后原来5列的变变为3列了。而且只有表头，没有数据。怎么回事呢？
leejelen 2010-07-12
  • 打赏
  • 举报
 回复
如果是读数据的。那数据库语句不是写成分页的语句么，只要你控制那个每页多少的变量，通过获取文本框里面的数据，再作为变量放进数据库查询语句中，查询不就可以了么？
guolover 2010-07-12
  • 打赏
  • 举报
 回复
非常感谢cntmi。

在这个代码里面，如果选择的行数大于当前页面行数的时候，是添加了空行来补充。那么，请问，我是从数据库里取出了数据用jsp分页显示的。如果当前页面只有10行，我输入框输入了15行，怎么让剩下补充的5行是下一页的前5行呢？
rjzou2006 2010-07-11
  • 打赏
  • 举报
 回复
JS分页

传入的显示多少行参数 。


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 

<head> 

<title>JS静态分页程序</title> 

</head> 

<style type="text/css"> 

a:link,a:visited,a:hover,.current,#info{ 

    border:1px solid #DDD; 

    background:#F2F2F2; 

    display:inline-block; 

    margin:1px; 

    text-decoration:none; 

    font-size:12px; 

    width:15px; 

    height:15px; 

    text-align:center; 

    line-height:15px; 

    color:#AAA; 

    padding:1px 2px; 

} 

a:hover{ 

    border:1px solid #E5E5E5; 

    background:#F9F9F9; 

} 

.current{ 

    border:1px solid #83E7E4; 

    background:#DFF9F8; 

    margin:1px; 

    color:#27CBC7; 

} 

#info{ 

    width:auto; 

} 

</style> 

<body> 

<div id="setpage"></div> 

<script type="text/javascript"> 

<!-- 

var totalpage,pagesize,cpage,count,curcount,outstr; 

//初始化 

cpage = 1; 

totalpage = 56; 

pagesize = 10; 

outstr = ""; 

function gotopage(target) 

{     

    cpage = target;        //把页面计数定位到第几页 

    setpage(); 

    //reloadpage(target);    //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况 

} 

function setpage() 

{ 

    if(totalpage<=10){        //总页数小于十页 

        for (count=1;count<=totalpage;count++) 

        {    if(count!=cpage) 

            { 

                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 

            }else{ 

                outstr = outstr + "<span class='current' >"+count+"</span>"; 

            } 

        } 

    } 

    if(totalpage>10){        //总页数大于十页 

        if(parseInt((cpage-1)/10) == 0) 

        {             

            for (count=1;count<=10;count++) 

            {    if(count!=cpage) 

                { 

                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 

                }else{ 

                    outstr = outstr + "<span class='current'>"+count+"</span>"; 

                } 

            } 

            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>"; 

        } 

        else if(parseInt((cpage-1)/10) == parseInt(totalpage/10)) 

        {     

            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>"; 

            for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++) 

            {    if(count!=cpage) 

                { 

                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 

                }else{ 

                    outstr = outstr + "<span class='current'>"+count+"</span>"; 

                } 

            } 

        } 

        else 

        {     

            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>"; 

            for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++) 

            {         

                if(count!=cpage) 

                { 

                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 

                }else{ 

                    outstr = outstr + "<span class='current'>"+count+"</span>"; 

                } 

            } 

            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>"; 

        } 

    }     

    document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>"; 

    outstr = ""; 

} 

setpage();    //调用分页 

//--> 

</script> 

</body> 

</html>
cntmi 2010-07-11
  • 打赏
  • 举报
 回复 


<html>



<head>

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

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



</head>



<body>

<script language="javascript">

<!--

var pageSize=4,currentPageNum=1,totlePageNum

var obj,totleRows,totleCols

var rowHeigth = 20;

var obj;

function begin(){

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

    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;

	}

}

function changePageSize(){

	pageSize = document.getElementById('pagesize').value ;

	begin();

}

//-->

</script>



<input type=text value=4 id=pagesize>

<input type=button value="确定" onclick="changePageSize();">

<div id="divTable">

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

<tbody><tr>

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

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

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

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



<tr height="20">

<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">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">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">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">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">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">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">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">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">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">

<!--



begin() ;

//-->

</script>



</body>



</html>
java源码包---java 源码 大量 实例
　Java访问权限控制，为Java操作文件、写入文件分配合适的权限，定义写到文件的信息、定义文件,输出到c:/hello.txt、写信息到文件、关闭输出流。 Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰...
JavaScript遍历HTML表格（使用JavaScript进行表格遍历）
上述代码首先选择了表格元素，然后遍历了除表头外的每一行，并修改了单元格的样式和内容。除了输出单元格的内容，我们还可以对表格进行其他操作。例如，我们可以修改单元格的样式、更改单元格的内容或添加新的行。...
vue.js根据数据循环生成表格_Vue动态生成表格的行和列
当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下：:data="tables"ref="multipleTable"tooltip-effect="dark"style="width: ...
JS 可编辑表格的实现(进阶)
表格的可编辑列，计算的列，每列的数据大小，以及是否删除都可进行配置，在修改单元格内容和删除行数据都会映射到相应数据集中。 实现效果： 2、设计思路与方法 现将基本样式写好，将所有的数据写在json文件里。...
js实现将页面中的数据表格导出为图片，js实现导出excl表格（内含三个插件）
开发需求：拿到同事代码，同事用 layui 写了一个数据表格，但是表格里的内容确是带样式的 button 。现在需要将这个表格导出，这着实让我头疼了许久。 找到的插件可以使用：canvas，试过js-table2excel，试过export2...
JavaScript

87,909

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章