js无刷新页面

最新推荐文章于 2023-07-16 17:39:23 发布
最新推荐文章于 2023-07-16 17:39:23 发布
阅读量214 收藏
点赞数
原文链接：http://www.cnblogs.com/q101301/p/3666804.html
版权

此项目讲解了所有的前台，后台分页，而且例子可以成功运行，对很多初学者有很大帮助！

做项目时偶尔有需求：数据一次性加载到页面同时还要实现分页，此时有两种方式一种是提交到当前页，这个里面会有一些变量需要置为hidden域，另外一种就是纯js分页。利用第一种方式效率不太高，存在多次访问数据库的问题，因而对于这种需要常常采用第二种方式。demo如下，实现思路：页面数据一次性全部加载完毕，js部分通过函数控制其是否显示达到分页的功能，有一个方法通过递归即可全部实现上一页、下一页、首页、尾页的功能，同时页面显示的分页点击部分也是由js内部innerHTML写入

 

1、js部分(单独保存为page.js)--js中的加减参数需要根据实际情形决定，即table第一行开始到真正的数据行之间有几行，则加减参数就是几

 

 

function goPage(pno,psize){

var itable = document.getElementByIdx("idData");

var num = itable.rows.length;//表格行数

var totalPage = 0;//总页数

var pageSize = psize;//每页显示行数

if((num-1)/pageSize > parseInt((num-1)/pageSize)){   

   totalPage=parseInt((num-1)/pageSize)+1;   

   }else{   

   totalPage=parseInt((num-1)/pageSize);   

   }   

var currentPage = pno;//当前页数

var startRow = (currentPage - 1) * pageSize+1;//开始显示的行   

   var endRow = currentPage * pageSize+1;//结束显示的行   

   endRow = (endRow > num)? num : endRow;

//前三行始终显示

for(i=0;i<1;i++){

var irow = itable.rows[i];

irow.style.display = "block";

}

for(var i=1;i<num;i++){

var irow = itable.rows[i];

if(i>=startRow&&i<endRow){

irow.style.display = "block";

}else{

irow.style.display = "none";

}

}

var pageEnd = document.getElementByIdx("pageEnd");

var tempStr = "共"+(num-1)+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";

if(currentPage>1){

tempStr += "<a href="#" onClick="goPage("+(currentPage-1)+","+psize+")">上一页</a>"

}else{

tempStr += "上一页";

}

if(currentPage<totalPage){

tempStr += "<a href="#" onClick="goPage("+(currentPage+1)+","+psize+")">下一页</a>";

}else{

tempStr += "下一页";

}

if(currentPage>1){

tempStr += "<a href="#" onClick="goPage("+(1)+","+psize+")">首页</a>";

}else{

tempStr += "首页";

}

if(currentPage<totalPage){

tempStr += "<a href="#" onClick="goPage("+(totalPage)+","+psize+")">尾页</a>";

}else{

tempStr += "尾页";

}

document.getElementByIdx("barcon").innerHTML = tempStr;

}

 

 

2、html部分

 

<html>

<head>

<script type="text/javascript" src="page.js"></script>

 

</head>

<body onLoad="goPage(1,10);">

<table id="idData" width="70%">

<tr>

<td>姓名</td>

<td>年龄</td>

<td>性别</td>

<td>户籍</td>

</tr>

<tr>

<td>刘金钟</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong1</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong2</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong3</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong4</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong5</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong6</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong7</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

<tr>

<td>liujinzhong</td>

<td>25</td>

<td>男</td>

<td>山西吕梁</td>

</tr>

</table>

<table width="60%" align="right">

<tr>

<td>

<div id="barcon" name="barcon"></div>

</td>

</td>

</table>

</body>

 

</html>

转载于:https://www.cnblogs.com/q101301/p/3666804.html

weixin_30852367
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax+js无刷新页面注册
11-24
Ajax+js+csse实现的无刷新注册页面。页面以排版好。
js无刷新改变页面url
01-12
js无刷新改变页面url ，通过js处理，页面请求在跳转回来，页面无刷新感觉，增加用户体验
JavaScript刷新页面的几种方法总结
12-09
1，reload 方法 该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) 2，replace 方法 方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。 语法： location.replace(URL) 通常使用： location.reload() 或者是 history.go(
js原生无刷新页面
sosadtoday的博客
11-15 704
js原生实现无刷新页面
js不刷新页面，改变url
zhijianyangguang的博客
07-24 8784
loadpage的时候有对URL Parameter的判断浏览器窗口有一个history对象，用来保存浏览历史。检查浏览器是否支持 if (window.history){ // 支持History API } else { // 不支持 }history对象提供了一系列方法，允许在浏览历史之间移动。其中包括 history.back(); history.forward()
JS location.href不重新刷新当前页面
夹扣的博客
05-25 1万+
前言： 前两天在工作中遇到location.href刷新页面不成功的问题，于是在此记录一下。 我的需求： 用Ajax请求后端返回数据和跳转的链接，其中返回的链接有可能是新的url也有可能是当前页面地址栏上的url。刚开始我直接使用window.location.href=url.来实现，即无论返回的什么url我都用window.location.href帮我重定向。 但是后来在测试的时候出...
JS表单提交后禁止页面刷新的方法
时光淡然
01-05 3277
使用return false不生效，禁止页面刷新的方法
js返回上一页并刷新的方法
Elvis技术小屋
03-30 1332
js返回上一页并刷新的几种方法： 返回上一页  刷新当前页面  返回前两页  返回上一页并刷新 （该方法不会再提示让你重新提交表单） 返回上一页
js修改当前url所携带参数，不刷新当前页面
hsany330的专栏
03-31 1868
需求：JWT前后端分离，移动端H5首页通过url传递参数token，未登录时（app在url中未传递token参数），调取app原生登录回调得到token参数。 问题：回调得到token之后，从其他页面跳回首页。由于首页在初始换时默认取的url中的token,此时跳转回首页时url中并没有token，token无法保存下来,决定看看有没有方法可以修改首页url的参数，在app原生登录返回时将token动态拼接在url中，并且不刷新页面。 对于原生js function changeURLParam(n
js刷新页面方法合集分享
xiaoweids的博客
07-16 6055
用js刷新当前页面的几种方法，包括reload方法、replace方法、自动刷新方法等。有需要的朋友参考下吧
JS刷新当前页面的几种方法总结
10-26
本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
用js来刷新当前页面保留参数的具体实现
12-09
其中还有js的刷新，不是很会弄，于是记录下， reload 方法，该方法强迫浏览器刷新当前页面。 语法： location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则...
页面禁止刷新处理Js实现
xgxmwang的专栏
04-30 5815
document.onkeydown = function(e)  {      e=window.event||e;     var k = e.keyCode; //Ctrl+r     if((e.ctrlKey == true && k == 82) || (k == 116) || (e.ctrlKey == true && k == 116))       {
js实现表单提交后不重新刷新当前页面，并停留在当前页面
热门推荐
YQ的博客
04-10 1万+
原文：http://www.cnblogs.com/limeiky/p/5599705.html 如何实现表单提交后不重新刷新当前页面 　　 　　 当我点击保存提交FORM表单后,如何让当前页面维持不变(即不刷新当前页)？ 在FORM表单后添加一个iframe 　　  点保存提交事件里面需要将target改为iframe的名字:
JavaScript禁用页面刷新
weixin_33739523的博客
04-23 1146
JavaScript禁用页面刷新代码如下： //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event.keyCode = 0; event.cancelBubble = true; return false; } }...
无感刷新token（requestFreshToken ）
weixin_44152684的博客
07-09 489
无感刷新token（requestFreshToken ）
js实现无刷新分页
sosadtoday的博客
11-24 316
js无刷新分页
前18大旋转修整器企业占据全球87%的市场份额.docx
最新发布
05-06
前18大旋转修整器企业占据全球87%的市场份额
无刷新页面跳转 js
08-31
无刷新页面跳转是指在网页中通过JavaScript脚本实现页面的跳转，而不需要刷新整个页面。实现无刷新页面跳转的常用方式有以下几种： 1. 使用location对象进行跳转： 通过JavaScript代码中的window.location.href属性可以修改当前页面的URL来进行页面跳转。例如，使用以下代码实现无刷新跳转到指定URL的页面： window.location.href = "http://www.example.com "; 2. 使用window.open方法打开新窗口： 通过调用window.open方法，可以在当前页面的基础上打开一个新的浏览器窗口或标签，并跳转到指定的URL。例如，下面的代码可以实现无刷新跳转到新窗口打开指定的URL： window.open("http://www.example.com "); 3. 使用AJAX技术加载新页面内容： 通过使用AJAX（Asynchronous JavaScript and XML）技术，可以在不刷新整个页面的情况下，加载新的页面内容到当前页面中的特定区域。 例如，可以通过jQuery的load方法实现无刷新跳转，代码如下： $("#targetDiv").load("newPage.html"); 通过以上几种方式，在不刷新整个页面的情况下实现页面跳转，提升用户体验和页面加载速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值