js分页显示的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js分页显示的问题相关的知识，希望对你有一定的参考价值。
上一页和下一页有缺陷。请高手帮忙改成如果是第一页的话，上一页不带连接，如果是最后一页的话，下一页不带连接。
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#frameContent
width: 500px; /*调整显示区的宽*/
height: 200px; /*调整显示区的高*/
font-size: 14px;
line-height: 20px;
border: 0px solid #000000;
overflow-pageINdex: hidden;
overflow-y: hidden;
word-break: break-all;
a
font-size: 12px;
color: #000000;
text-decoration: underline;
a:hover
font-size: 12px;
color: #CC0000;
text-decoration: underline;
</style>
</head>
<body>
<table border="1"> /********************************************************************************/
<div id="frameContent">
<P><IMG src="/ewebeditor/uploadfile/20100511230628809.jpg" border=0></P>
<P>这个下载专区专门使用这个鞋懂</P>
<P><IMG style="WIDTH: 346px; HEIGHT: 164px" height=599 src="/ewebeditor/uploadfile/20100511230653371.jpg" width=798 border=0></P>
<P>不知道这个测试结果如何。如果OK。。如果OK。那么这个即将陈公公。做</P>
<P>地方</P>
<P>S股ijaodifg 破ihsogkn群的</P>
<P>S股ijaodifg 破ihsogkn群的</P>
<P> </P>
<P>S股ijaodifg 破ihsogkn群的</P>
<P>S股ijaodifg 破ihsogkn群的</P>
<P>S股ijaodifg 破ihsogkn群的</P>
<P>S股ijaodifg 破ihsogkn群的</P>
</div>
<div id="pages" style="font-size:12px;"></div>
<script language="javascript">
var obj = document.getElementById("frameContent"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
var pgindex=1;
var i=1;
var allpages=0; //当前页
window.onload = function() //重写窗体加载的事件
allpages= Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
pages.innerHTML += "<a href=\"javascript:gotopage('-1');\">上一页</a>"
for (i=1;i<=allpages;i++)
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
//循环输出第几页
pages.innerHTML += "<a href=\"javascript:gotopage('1');\">下一页</a>"
function gotopage(value)
try
if(!pgindex==1)
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
catch(e)
function showPage(pageINdex)
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight); //根据高度，输出指定的页
pgindex=pageINdex;
</script>
</body>
</html>
QQ:706380
如果谁还有那种多DIV版，发来也可以。没明白意思的可以加QQ。紧急交工，必有重谢。
请各位看弄清楚。是在JS里面
根本没有连接过数据库。。
这个是文章内容分页。
1.SQL语句写错了
2.你提交的值不对
自己测试一下
<a href="servlet/FyServlet?currentPage=$currentPage-1 &&user=$username &&strURL=<%=strURL %>">上一页</a>
我自己写的是这样提交的希望对你有帮助 参考技术B hj,fgv ryiw
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js )
需求：在APP落地页上的底部位置显示此前其他用户的购买记录，要求此div盒子只显示3条半，但一页有10条，div内的滑动条滑到一页底部自动加载下一页并发加载埋点。
实现：首先理解三个概念，分别是contentH，viewH，scrollTop。
contentH:即所要滑动的元素内容的高度，包括可见部分以及滚动条下面的不可见部分。
ViewH:即我们看到的这个DIV的高度，不包括可见部分也不包括滚动条下面的不可见部分。
scrollTop:即滚动条距离顶部的距离，若scrollTop的值为0，则代表滚动条在最上面。拉动滚动条，从最上面到最下面，变化的是scrollTop的值。例：假如contentH的高度为2000，而这个DIV的高度只有300，那么还有1700不可见，拉动滚动条到最底部，此时scrollTop为1700，所以这个1700也可以理解为滚动条可以滚动的长度。当滑动条拉到底部的时候，contentH=viewH+scrollTop。
故可实现如下：
$.ajax({
type: "get",
url: "record.json",//测试用假数据
dataType: "json",
success: function (records) {
var showLength = records.data.length;//需要显示的总长度
var flag = showLength <= 10 ? showLength : 10;
load_records(0, flag);//开始加载第一页
hxmClickStat(‘mar_all_207_ssjk.goumai.load.‘ + 1, {url_ver: "SJCGBS-10030"});//不论长度是否超过10都发送第一页埋点
if (showLength > 10) {
var origin = 1, load = 2;
$(‘.records_body‘).scroll(function () {
var contentH = $(this).get(0).scrollHeight;
var viewH = $(‘.records_body‘).height();
var scrollTop = $(this).scrollTop();
var pages = Math.ceil(showLength / 10);//需要显示的总页数
if (viewH + scrollTop == contentH && load <= pages) {
if (load * 10 < showLength) {
load_records(origin++ * 10, load++ * 10);//加载下一页的10条数据
hxmClickStat(‘mar_all_207_ssjk.goumai.load.‘ + origin, {url_ver: "SJCGBS-10030"});//滑动到底部开始加载下一页时发送埋点
} else {
load_records(origin * 10, showLength);//加载最后一页
hxmScrollBottomStat(‘mar_all_207_ssjk.goumai.bottom‘, {url_ver: "SJCGBS-10030"});//最后一页发送埋点
load++;//避免重复执行
}
}
});
}
function load_records(start, end) {
for (var i = start; i < end; i++) {
var stime = records.data[i].time;
var accure_time = stime.slice(5, stime.length);
var record_html = ‘<div class="records_item"><img src=‘ + records.data[i].avatar + ‘ class="avatar"/><div class="buyer_info"><p class="buyer_name">‘ + records.data[i].account + ‘</p><p class="status_title">购买成功</p></div>\n\<‘ +
‘div class="buyer_address"><p class="buy_address">‘ + records.data[i].city + ‘ IP:‘ + records.data[i].ip + ‘</p>\n\<‘ +
‘p class="buy_time">‘ + accure_time + ‘</p></div></div>‘;
$(record_html).appendTo(‘.records_body‘);//插入一条购买记录
}
}
},
error: function () {
console.log(‘some errors happened!‘);
}
});
以上方法在苹果手机浏览器中会达不到预期效果，解决方法及代码改进
将触底判断条件更改为
if (viewH + scrollTop +1>= contentH && load <= pages)
究其原因，故在滚动时将scrollTop和viewH、contentH分别打印出来，滑到底部的时候发现他们有1个单位的误差，可能是因为某些div元素的高度不为整数而js在判断的时候直接将其取整了，故可以选择将其加1。
也可以使用另一种方式百分比的判断条件来实现：在滚动条距离底端2%以内：scrollTop / (contentH– viewH) >= 0.98。
或者使用绝对数值范围来实现，滚动条距离底端30px以内：contentH – viewH – scrollTop <= 30。
以上是关于js分页显示的问题的主要内容，如果未能解决你的问题，请参考以下文章