Js分页

xuexijava 2010-03-29 04:46:37
做了一个发布文章的页面
如果文章过长，实现分页功能
思路是这样
想能过ＪａｖａＳｃｒｉｐｔ实现分页
写一个Ｄｉｖ，一次把文章数据全部读出来显示在该Ｄｉｖ中，在Ｊｓ中判断可显示区域的高度值，超过该高度的隐藏，
然后点下一页的时候把后边的字符显示出来，点上一页的时候显示前边隐茂的字符
是这样个想法，不知道能否实现
本人ＪＳ太烂想问高手这个功能是否可以实现。。。？
如果能贴出代码供参考，那就太谢谢了
...全文
159 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
javagxc 2010-03-30
  • 打赏
  • 举报
 回复
http://download.csdn.net/source/1823849
这个对你应该有帮助，看看吧
qinfeng891030 2010-03-30
  • 打赏
  • 举报
 回复
太牛了，
zings 2010-03-29
  • 打赏
  • 举报
 回复
Ajax分页 。。。
huangqibing0626 2010-03-29
  • 打赏
  • 举报
 回复
代码是网上找的，仅供参考！
<!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">

<head>

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

<html>

<head>

    <title>MyFenYe.html</title>



    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">

function divideContent(contentDomId,linkDomId){

var maxCotentHeight = 600;

var lineheight = parseInt(document.getElementById(contentDomId).style.lineHeight);

maxCotentHeight = Math.ceil(maxCotentHeight/lineheight)*lineheight;

var contentHeight = document.getElementById(contentDomId).scrollHeight;

var pageCount = Math.ceil(contentHeight/maxCotentHeight);

if(pageCount>1){

var linkhtml = "";

for(var i=0;i<pageCount;i++){

   linkhtml += '[<span style="cursor:pointer;text-decoration:underline;color:blue; font-weight:bold" onclick="document.getElementById(\''+contentDomId+'\').scrollTop='+i*maxCotentHeight+'">'+(1+i)+'</span>]  ';

}

document.getElementById(linkDomId).innerHTML = linkhtml;

}

document.getElementById(contentDomId).style.height = maxCotentHeight+"px";

document.getElementById(contentDomId).style.overflow = 'hidden';

document.getElementById(contentDomId).style.display = 'block';

document.getElementById(contentDomId).style.visibility = 'visible';

document.getElementById(contentDomId).scrollTop = 0;

}

window.onload= function(){



divideContent('articlecontent','articlecontentlink');



}

    </script>

</head>



<body>

   <div id="articlecontent" style="line-height:16px; visibility:hidden;">

     <p style="TEXT-INDENT: 2em"><strong>人民网3月30日报道</strong> 今年开始，全国各地中小学新任教师应全部由省级教育行政部门统一组织公开招聘考试，按规定程序择优聘用，不得再以其他方式和途径自行聘用教师。</p>

<p style="TEXT-INDENT: 2em">教育部日前就进一步做好中小学教师补充工作发出通知。教育部表示，省级教育行政部门要结合国家或地方“特岗计划”的实施，统筹考虑本行政区域内教师岗位需求情况，合理安排中小学教师自然减员补充，统一组织教师公开招聘考试，按规定程序择优聘用。</p>

<p style="TEXT-INDENT: 2em">当前高校毕业生就业形势严峻，就业压力加大，同时部分农村学校特别是中西部边远贫困地区农村学校教师仍紧缺，毕业生下不去，合格教师难以补充的问题仍突出。教育部鼓励引导高校毕业生到农村学校任教，一方面进一步加强中小学特别是农村学校师资力量，一方面也能有效促进高校毕业生就业。</p>

<p style="TEXT-INDENT: 2em">为此，教育部表示，“特岗计划”要形成规模，教师基数大、缺额较多的省份，每年设岗不少于1万个，要经过努力，争取全国义务教育阶段学校教师特设岗位达到20万个。</p>

<p style="TEXT-INDENT: 2em">教育部表示，坚决杜绝不合格人员进入教师队伍，严禁在有合格师资来源的情况下“有编不补”，重点做好农村中小学教师补充工作。各地将持有与教学岗位相应的教师资格证书，作为教师招聘录用的前提条件和职务晋升的必要条件，严禁聘用不具备教师资格的人员担任专任教师。</p>

<p style="TEXT-INDENT: 2em"><strong>■ 声音 </strong></p>

<p style="TEXT-INDENT: 2em"><strong>河南新安教育局局长韩经权：“让城乡教师编制标准统一”</strong></p>

<p style="TEXT-INDENT: 2em">针对教育部的相关政策，河南省洛阳市新安县教育局局长韩经权昨日表示，关键不在于谁招聘，而是在于让城乡教师编制标准统一，不能再让城乡教师编制倒挂。他介绍说，仅新安县一个县就缺少教师编制500人，但“如果我们领导要招聘教师，却要追究领导的责任”。</p>

<p style="TEXT-INDENT: 2em">韩经权表示，有不少人想到农村当教师，无论是本地人还是大学生，但现在县级教育行政主管部门却决定不了编制，“不管谁招聘，现在就需要的是农村和城区的教师编制标准相同。”他认为以农村教学点分散为由限制农村教师编制标准的做法不合理，“我们首先是要满足农村学校的教师需要，然后才考虑其他的问题。”</p>

<p style="TEXT-INDENT: 2em">据了解，我国现行的是2001年中小学教师编制标准，城市、县镇和农村分别规定小学生师比为19:1、21:1和23:1，初中生师比为13.5:1、16:1和18:1。这一编制标准与我国广大农村地广人稀、生源分散、交通不便、学校规模较小、成班率低，存在大量村小特别是尚存在10万个分散教学点的实际情况严重相违。 新京报 (本文来源：<a href="http://media.163.com/special/007625CB/rmw.html"><font color="#1e50a2">人民网</font></a> 作者：记者郭少峰) <a href="http://news.163.com/"><img class="icon" height="11" alt="李蔚" src="http://img1.cache.netease.com/cnews/img07/end_i.gif" width="12" border="0" /></a> </p>

<p style="TEXT-INDENT: 2em"><strong>人民网3月30日报道</strong> 今年开始，全国各地中小学新任教师应全部由省级教育行政部门统一组织公开招聘考试，按规定程序择优聘用，不得再以其他方式和途径自行聘用教师。</p>

<p style="TEXT-INDENT: 2em">教育部日前就进一步做好中小学教师补充工作发出通知。教育部表示，省级教育行政部门要结合国家或地方“特岗计划”的实施，统筹考虑本行政区域内教师岗位需求情况，合理安排中小学教师自然减员补充，统一组织教师公开招聘考试，按规定程序择优聘用。</p>

<p style="TEXT-INDENT: 2em">当前高校毕业生就业形势严峻，就业压力加大，同时部分农村学校特别是中西部边远贫困地区农村学校教师仍紧缺，毕业生下不去，合格教师难以补充的问题仍突出。教育部鼓励引导高校毕业生到农村学校任教，一方面进一步加强中小学特别是农村学校师资力量，一方面也能有效促进高校毕业生就业。</p>

<p style="TEXT-INDENT: 2em">为此，教育部表示，“特岗计划”要形成规模，教师基数大、缺额较多的省份，每年设岗不少于1万个，要经过努力，争取全国义务教育阶段学校教师特设岗位达到20万个。</p>

<p style="TEXT-INDENT: 2em">教育部表示，坚决杜绝不合格人员进入教师队伍，严禁在有合格师资来源的情况下“有编不补”，重点做好农村中小学教师补充工作。各地将持有与教学岗位相应的教师资格证书，作为教师招聘录用的前提条件和职务晋升的必要条件，严禁聘用不具备教师资格的人员担任专任教师。</p>

<p style="TEXT-INDENT: 2em"><strong>■ 声音 </strong></p>

<p style="TEXT-INDENT: 2em"><strong>河南新安教育局局长韩经权：“让城乡教师编制标准统一”</strong></p>

<p style="TEXT-INDENT: 2em">针对教育部的相关政策，河南省洛阳市新安县教育局局长韩经权昨日表示，关键不在于谁招聘，而是在于让城乡教师编制标准统一，不能再让城乡教师编制倒挂。他介绍说，仅新安县一个县就缺少教师编制500人，但“如果我们领导要招聘教师，却要追究领导的责任”。</p>

<p style="TEXT-INDENT: 2em">韩经权表示，有不少人想到农村当教师，无论是本地人还是大学生，但现在县级教育行政主管部门却决定不了编制，“不管谁招聘，现在就需要的是农村和城区的教师编制标准相同。”他认为以农村教学点分散为由限制农村教师编制标准的做法不合理，“我们首先是要满足农村学校的教师需要，然后才考虑其他的问题。”</p>

<p style="TEXT-INDENT: 2em">据了解，我国现行的是2001年中小学教师编制标准，城市、县镇和农村分别规定小学生师比为19:1、21:1和23:1，初中生师比为13.5:1、16:1和18:1。这一编制标准与我国广大农村地广人稀、生源分散、交通不便、学校规模较小、成班率低，存在大量村小特别是尚存在10万个分散教学点的实际情况严重相违。 新京报 (本文来源：<a href="http://media.163.com/special/007625CB/rmw.html"><font color="#1e50a2">人民网</font></a> 作者：记者郭少峰) <a href="http://news.163.com/"><img class="icon" height="11" alt="李蔚" src="http://img1.cache.netease.com/cnews/img07/end_i.gif" width="12" border="0" /></a> </p>

</div> 

<div id="articlecontentlink" style="line-height:16px;" align="center"> 

</div> 

</body>

</html>
huaye 2010-03-29
  • 打赏
  • 举报
 回复
你看下吧！
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page import="com.mycompany.entity.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>E-Store</title>
</head>
<link href="css/css.css" rel="stylesheet" type="text/css">
<body>
<jsp:include page="frameTop.jsp" flush="true" />
<table border="0" width="1024" align="center">

<tr>
<td width="300" valign="middle" bgcolor="#F5F5F5">
<!--左侧01-->
<jsp:include page="frameLeft.jsp" flush="true" />
</td>
<td width="724" align="center" valign="top" bgcolor="#FFFFFF">
<!--右侧01-->
<div align="left">
<img src="image/fg_right03.jpg">
</div>
<%
//GoodsDao dao = new GoodsDao();
List goodsList =(List)request.getAttribute("goodsList");
/* int goodsnumber=goodsList.size();//总共多少条记录

int totalpages=0;//总共页数
if(goodsnumber%6==0)
totalpages=goodsnumber/6;
else totalpages=goodsnumber/6+1;

int pagenumber=0;//当前页
String strnum=request.getParameter("pagenumber");
if(strnum==null)
pagenumber=1;
else pagenumber=Integer.parseInt(strnum);

int start=(pagenumber-1)*6;
int end=pagenumber*6;

int count=end-start;
if(count<=0)
end=goodsnumber;

for(int i=start;i<end;i++)
{
GoodsEntity good=(GoodsEntity)goodsList.get(i);
}*/


int pageNumber = goodsList.size(); // 计算出有多少条记录
int maxPage = pageNumber; // 计算有多少页数
String strNumber = request.getParameter("pageNum");
int number = 0;
if (maxPage % 6 == 0) {
maxPage = maxPage / 6;
} else {
maxPage = maxPage / 6 + 1;
}
if (strNumber == null) {
number = 0;
} else {
number = Integer.parseInt(strNumber);
}

int start = number * 1;//开始条数
int over = (number + 1) * 6;//结束条数
int count = pageNumber - over;//还剩多少条记录
if (count <= 0) {
over = pageNumber;
}
for (int i = start; i < over; i++) {
GoodsEntity selectGoods = (GoodsEntity) goodsList.get(i);
%>



<table width="320" height="136" border="1" align="center"
cellpadding="1" cellspacing="1" bordercolor="#FFFFFF"
bgcolor="#999999">
<tr>
<td width="40%" height="80" rowspan="5" bgcolor="#FFFFFF">
<div align="center">
<image src="<%=selectGoods.getPicture()%>" width="110"
height="100" />
</div>
</td>
<td width="58%" bgcolor="#FFFFFF">
<div align="left"><%=selectGoods.getName()%></div>
<div align="left">
单价：<%=selectGoods.getOriginalPrice()%>元
</div>
<div align="left"><%=selectGoods.getIntroduce()%></div>
<div align="left">
<%
if (session.getAttribute("user") != null
|| session.getAttribute("id") != null) {
%>
<a href="#"
onClick="window.open('goodsShowSelectOne.jsp?id=<%=selectGoods.getId()%>','','width=500,height=200');">查看详细内容</a>
<%
} else {
%>
登录后才能购买
<%
}
%>
</div>
</td>
</tr>
</table>
<%
}
%>
<br>
<div align="center">
<table width="90%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr align="center">
<td width="13%">
共为<%=maxPage%>页
</td>
<td width="18%">
共有<%=pageNumber%>条记录
</td>
<td width="26%">
当前为第<%=number + 1%>页
</td>
<td width="15%">
<%
if ((number + 1) == 1) {
%>
上一页
<%
} else {
%>
<a href="main.jsp?pageNum=<%=number - 1%>">上一页</a>
</td>
<%
}
%>
<td width="14%">
<%
if (maxPage <=(number + 1)) {
%>
下一页
<%
} else {
%>
<a href="main.jsp?pageNum=<%=number + 1%>">下一页</a>
</td>
<%
}
%>
</tr>
</table>
</div>
</td>
</tr>
<tr>

<td colspan="2"><jsp:include page="frameBottom.jsp"
flush="true" /></td>
</tr>
</table>
</body>
</html>

wangdbeyond 2010-03-29
  • 打赏
  • 举报
 回复
用javascript 分页？ 有创意
xiaozejun 2010-03-29
  • 打赏
  • 举报
 回复
有两种方式
1.在页面上用<%%>来进行分页
2.通过Ajax来分页
liujie3581163 2010-03-29
  • 打赏
  • 举报
 回复
初学者路过
smi_ling 2010-03-29
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 ahahayay 的回复:]
.... 这节截取字符串不就行了吗？？....
[/Quote]
up
leihuanhuan123 2010-03-29
  • 打赏
  • 举报
 回复
和Web一样
No-zero 2010-03-29
  • 打赏
  • 举报
 回复
js分页?没听说过的路过
xuexijava 2010-03-29
  • 打赏
  • 举报
 回复
ＪａｖａＳｃｒｉｐｔ太烂
哪位高人给段代码看看
ahahayay 2010-03-29
  • 打赏
  • 举报
 回复
.... 这节截取字符串不就行了吗？？....
YangWenChaoX 2010-03-29
  • 打赏
  • 举报
 回复
js分页？ 有创意？
明确的告诉你： 能实现.
代码？ 有思路了还怕写不出 ？
xuexijava 2010-03-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 ibm_hoojo 的回复:]
CSS code

你 还不如用iframe 那样不简单些。
用div也可以，就是添加一个滚动条或是按钮。让他移动div位置！
[/Quote]
想添加个按钮，显示为一下页或者上一页
点击的时候分页显示
哥们能给个代码看年示
hoojo 2010-03-29
  • 打赏
  • 举报
 回复 


你 还不如用iframe 那样不简单些。

用div也可以，就是添加一个滚动条或是按钮。让他移动div位置！
经典的10种JS分页代码
ASP分页代码都得熟悉，JS分页代码你熟悉吗？精心集的分页代码。
js分页组件及部分关键代码
js pagiantion插件分页，组件及主要js调用代码；适合有点基础的同学
JS分页源代码，非常详细
JS分页源代码，非常详细
e路JS分页样式类，e路JS分页样式类
e路JS分页样式类e路JS分页样式类e路JS分页样式类
JS分页控件+CSS
这个是新的。 加强了一些功能。 欢迎分享
Web 开发

81,122

社区成员

341,744

社区内容

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

加载中

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

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

+ 用AI写文章