js 分页新手提问

请问，怎样用js实现一个无页面刷新的分页：只有上面的内容变，下面的上一页，下一页按钮始终显示(注：不能用fram实现)。谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

提取固定长度的段落？
插入特殊标志符号然后split()分割？
顶顶。
js 传递当前页数到后台代码中，后台代码获取过来参数，然后对数据库进行查询并分页，最终返回分页后的数据。然后把返回的数据显示在你的html控件中
把文章分段放入数组！var arr=['1','2','3'];js 上一页，下一页修改数组索引就可以了
简单写了下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<script>
    function makeData()
    {
      var a = [];//放置内容。现在放0-99
      for(i=0;i<100;i++)
      {
        a[i]=i;
      }
      return a;
    }
    //显示指定页数和每页记录数的数据。
    function showPage(page,pagesize)
    {
      page = page||0;
      pagesize = pagesize||5;
      var data = makeData();
      if(page+1>Math.ceil(data.length/pagesize)) return;
      document.getElementById("content").innerHTML="当前显示第"+Math.min(Math.ceil(data.length/pagesize),(page+1))+"页,共"+Math.ceil(data.length/pagesize)+"页";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.max(0,(page-1))+","+pagesize+");'>显示上一页</button>";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.min(Math.ceil(data.length/pagesize),(page+1))+","+pagesize+");'>显示下一页</button>";
      text = "<table id='tab1'>";
      for(i=page*pagesize;i<Math.min(data.length,(1+page)*pagesize);i++)
      {
           text += "<tr><td>"+ data[i] + "</td></tr>";      }
      text += "</table>";
      document.getElementById("content").innerHTML+=text;
    }

    window.onload=function(){
        showPage(12,8);//显示第二页，每页8条。
        };
</script> <div id="content">
</div>
稍微调整下，数据开始时构造好就行了：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<script>
    function makeData()
    {
      var a = [];//放置内容。现在放0-99
      for(i=0;i<100;i++)
      {
        a[i]=i;
      }
      return a;
    }
    //显示指定页数和每页记录数的数据。
    function showPage(page,pagesize)
    {
      page = page||0;
      pagesize = pagesize||5;          if(page+1>Math.ceil(data.length/pagesize)) return;
      document.getElementById("content").innerHTML="当前显示第"+Math.min(Math.ceil(data.length/pagesize),(page+1))+"页,共"+Math.ceil(data.length/pagesize)+"页";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.max(0,(page-1))+","+pagesize+");'>显示上一页</button>";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.min(Math.ceil(data.length/pagesize),(page+1))+","+pagesize+");'>显示下一页</button>";
      text = "<table id='tab1'>";
      for(i=page*pagesize;i<Math.min(data.length,(1+page)*pagesize);i++)
      {
           text += "<tr><td>"+ data[i] + "</td></tr>";      }
      text += "</table>";
      document.getElementById("content").innerHTML+=text;
    }
    var data;
    window.onload=function(){
       data = makeData(); //构建数据
        showPage(1,8);//显示第二页，每页8条。
    };
</script> <div id="content">
</div>
都写到这里了已经很清楚了吧？放数组里很容易的，直接赋值或者从其它地方获取数据如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<script>
    function makeData()
    {
      var a = [];//放置内容。现在放0-99
      var nr = document.getElementById("nr").innerText.split(/\r?\n/g);
      for(i=0;i<nr.length;i++)
      {
        a[i]="    "+nr[i]+"<br>";
      }
      return a;
    }
    //显示指定页数和每页记录数的数据。
    function showPage(page,pagesize)
    {
      page = page||0;
      pagesize = pagesize||5;          if(page+1>Math.ceil(data.length/pagesize)) return;
      document.getElementById("content").innerHTML="当前显示第"+Math.min(Math.ceil(data.length/pagesize),(page+1))+"页,共"+Math.ceil(data.length/pagesize)+"页";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.max(0,(page-1))+","+pagesize+");'>显示上一页</button>";
      document.getElementById("content").innerHTML+="<button onclick='showPage("+Math.min(Math.ceil(data.length/pagesize),(page+1))+","+pagesize+");'>显示下一页</button>";
      text = "<table id='tab1' width='400px'>";
      for(i=page*pagesize;i<Math.min(data.length,(1+page)*pagesize);i++)
      {
           text += "<tr><td>"+ data[i] + "</td></tr>";      }
      text += "</table>";
      document.getElementById("content").innerHTML+=text;
    }
    var data;
    window.onload=function(){
       data = makeData(); //构建数据
        showPage(0,3);//显示第二页，每页3条。
    };

</script> <div id="content" >
</div> <div id ="nr" style="display:none;">
新一代嵌入式操作系统平台Windows Embedded Compact 7完整的继承了Windows Embedded CE 6.0的诸多特性，更多的新特性可以帮助开发者更快的构建创新的消费电子设备和工业控制设备。Windows Embedded Compact 7不仅支持X86和MIPS，同时支持最新的ARMv7架构和多核处理器，可以帮助设备制造商更快的速度将产品推向市场。在广为赞誉的Visual Studio 2008中无缝集成Platform Builder 2008，可以为开发者提供更为高效，流畅的开发体验。最新加入的Silverlight for Windows Embedded技术能够为移动设备提供丰富的用户交互体验，使用强大的Expression Blend 3设计工具，有效提升开发者实现复杂交互效果的效率。Windows Embedded Compact 7为消费电子设备提供了更多的新特性。包括全新的Windows Media Player和Internet Explorer，新加入的Media Library可以为消费电子提供媒体管理的功能，新特性可以使设备同Windows 7计算机进行媒体传输更加方便快捷。对于企业用户的体验，通过Windows Embedded Compact 7平台可以在终端上阅读Office文档、PDF文件。Windows Embedded Compact 7中还集成了一些非常重要的协议，用户可以通过终端设备连接到Exchange，访问公司内部的信息，查阅日历、业务联系人等。近日，为了能够让更多嵌入式技术爱好者快速掌握微软Windows Embeded Compact 7的最新技术，借助Microsoft及其全球嵌入式合作伙伴华清远见提供的优质学习资源节省自己宝贵的时间，同时尽可能省去繁琐的配置环境等时间，Microsoft联合华清远见Windows Embeded Compact 7专家，分别在北京、上海、深圳、成都等地推出微软嵌入式动手实验室全国开放体验日活动，和大家一起共同体验Windows Embeded Compact 7带来的精彩世界。一个平台，无限可能！（微软活动官方网站）活动时间【提示】每个地点每场限30人，请务必提前预约订位，谢谢！● 2011年4月09日，下午2:00-4:30【北京、上海】
● 2011年4月16日，下午2:00-4:30【深圳、成都】
● 2011年5月07日，下午2:00-4:30【北京、深圳】
● 2011年5月28日，下午2:00-4:30【北京、上海、深圳】
● 2011年6月18日，下午2:00-4:30【北京、深圳、成都】后续活动时间安排敬请期待...活动地点
北京站：北京市海淀区中关村财智大厦C座3层
上海站：上海市徐汇区漕溪路银海大厦A座801号
深圳站：深圳罗湖宝安南路蔡屋围金塘大厦3层
成都站：成都市科华北路99号科华大厦604室其他参加方式
不在北京上海深圳成都四地无法现场实践体验的朋友，同样可以在下方表单提交个人信息，只要在[活动地点]选项中，选择“地域限制，申请观看视频”一项即可，工作人员会主动联系您，告知视频收看地址。申请北京上海深圳成都现场体验的朋友，活动结束后我们也会将相关视频发送到您邮箱中的。
</div>
http://www.open-lib.com/Type/163-1.jspjquery分页插件大全
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
var global={
text:"国际在线消息 (记者韩曙)：美国总统奥巴马28日晚在位于华盛顿的国防大学发表讲话，声称美国目前在利比亚的行动表明美国履行了承诺，他重申美国将在利比亚执行“有限的”军事行动。"+
　　 "奥巴马说，美国在利比亚的军事行动是为了维护美国的利益和价值观。在联合国通过相关决议之后，美国和北约、欧洲、阿拉伯世界的盟友一道，有效执行了禁飞区决议，保护平民生命安全，防止屠杀"+
"事件发生，目前已经取得了初步的成果。美国将很快向北约移交禁飞区行动和保护利比亚平民行动的指挥权，转向支持性角色。但奥巴马强调，美国在利比亚的使命并未完成。未来美国将为利比亚提供更"+
"多的人道主义援助，同时将谋求在政治上继续孤立卡扎菲政权进而实现让卡扎菲下台的目标，并帮助其后的利比亚政府融入国际社会。"+
　　 "但针对要求美国加大对利比亚军事干涉力度的呼声，奥巴马表示，扩大军事行动来谋求利比亚政府更迭是一个“错误”，将会分裂联盟、将美国"+
"军队拖入地面战争，而空袭也会造成更多的平民死伤，美国将为此付出沉重代价。他还特地强调“不能重复伊拉克战争的错误”。"+
　　 "包括美国在内的多国联军从当地时间19日开始对利比亚展开空袭，执行联合国1973号决议，在利比亚设立禁飞区和采取必要手段保护平民安全。但近来，美国舆论和民众广泛质疑美军在利比亚的军事行动目的不明，并且有将美军拖入又一场战争的风险。",
currIndex:0, //当前页索引
pageCount:0, //总页数
pageSize:100 //每页显示的字数
};$(document).ready(function(){
var total=global.text.length;
global.pageCount=total%global.pageSize==0?total/global.pageSize:parseInt(total/global.pageSize)+1;
Load();

$("#lFirst").click(function(){
global.currIndex=0;
Load();
});
$("#lPrev").click(function(){
if(global.currIndex==0) return;
global.currIndex-=1;
Load();
});
$("#lNext").click(function(){
if(global.currIndex==global.pageCount-1) return;
global.currIndex+=1;
Load();
});
$("#lLast").click(function(){
global.currIndex=global.pageCount-1;
Load();
});
});function Load(){
$("#divContent").text(global.text.substr(global.currIndex*global.pageSize,global.pageSize));
$("label").text((global.currIndex+1)+"/"+global.pageCount);
}
</script>
</head>
<body>
<div id="divContent"></div>
<div id="divPage">当前<label></label>页<a id="lFirst" href="javascript:;">首页</a><a id="lPrev" href="javascript:;">上一页</a>
<a id="lNext" href="javascript:;">下一页</a><a id="lLast" href="javascript:;">尾页</a></div>
</body>
</html>直接保存至html试试。
<span id="span"></span>
<br>
<a href="javascript:void(0);" onclick="getContent(1)">上一页</a> | <a href="javascript:void(0);" onclick="getContent(2)">下一页</a>
<script>
var content = "";
content += "天地有正气，杂然赋流形。";
content += "下则为河岳，上则为日星。";
content += "于人曰浩然，沛乎塞苍冥。";
content += "皇路当清夷，含和吐明庭。";
content += "时穷节乃见，一一垂丹青。";
content += "在齐太史简，在晋董狐笔。";
content += "在秦张良椎，在汉苏武节。";
content += "为严将军头，为嵇侍中血。";
content += "为张睢阳齿，为颜常山舌。";
content += "或为辽东帽，清操厉冰雪。";
content += "或为出师表，鬼神泣壮烈。";
content += "或为渡江楫，慷慨吞胡羯。";
content += "或为击贼笏，逆竖头破裂。";
content += "是气所磅礴，凛烈万古存。";
content += "当其贯日月，生死安足论。";
content += "地维赖以立，天柱赖以尊。";
content += "三纲实系命，道义为之根。";
content += "嗟予遘阳九，隶也实不力。";
content += "楚囚缨其冠，传车送穷北。";
content += "鼎镬甘如饴，求之不可得。";
content += "阴房阗鬼火，春院闭天黑。";
content += "牛骥同一皂，鸡栖凤凰食。";
content += "一朝蒙雾露，分作沟中瘠。";
content += "如此再寒暑，百疠自辟易。";
content += "嗟哉沮洳场，为我安乐国。";
content += "岂有他缪巧，阴阳不能贼。";
content += "顾此耿耿在，仰视浮云白。";
content += "悠悠我心悲，苍天曷有极。";
content += "哲人日已远，典刑在夙昔。";
content += "风檐展书读，古道照颜色。";
var page = 0;
var size = 24;
var nump = Math.ceil(content.length / size) - 1;
function getContent(t){
if(t == 2){
if(++page > nump){
page = nump;
}
}else{
if(--page < 0){
page = 0;
}
} span.innerHTML = content.substring(page * size, page * size + size);
}
getContent(1);
</script>

js 分页 新手提问

解决方案 »

js 分页新手提问