无刷新页面分页

<!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=utf-8" /><title>无标题文档</title><script src="jquery-1.11.2.min.js"></script></head>

<body><table id="tb" width="100%" border="1" cellpadding="0" cellspacing="0">

</table><div><span id="shang">上一页</span><span id="xia">下一页</span><span>当前第:<input type="text" id="dq" value="1" />页</span><span>总共:<span id="zys"></span>页</span></div></body><script type="text/javascript">$(document).ready(function(e) {    FenYe();     ZYS(2);

     $("#shang").click(function(){               var dq = parseInt($("#dq").val());

               if(dq>1){                    $("#dq").val(dq-1);               }else{                    $("#dq").val(1);               }               FenYe();          })

     $("#xia").click(function(){               var dq = parseInt($("#dq").val());               if(dq<$("#zys").text()){                    $("#dq").val(dq+1);               }else{                    $("#dq").val($("#zys").text());               }               FenYe();          })   

});

//实现分页的方法function FenYe(){     var dq = $("#dq").val();     $.ajax({          url:"chuli.php",          data:{page:dq},          dataType:"JSON",          type:"GET",          success: function(data){               var str = "<tr><td>代号</td><td>名称</td></tr>";               for(var k in data){                    str=str+"<tr><td>"+data[k].Code+"</td><td>"+data[k].Name+"</td></tr>";               }                    $("#tb").html(str);               }          });

}

//根据每页几条数据求总页数function ZYS(n){     $.ajax({          url:"zyschuli.php",          data:{list:n},          type:"POST",          dataType:"TEXT",          success: function(data){               $("#zys").text(data);               }          });}

</script></html>

总页数:
<?php

include("DBDA.php");$db = new DBDA();

$sql ="select count(*) from Info";$sj = $db->StrQuery($sql);

$list = $_POST["list"];

$zys = 0;if($sj%$list==0){     $zys = $sj/$list;}else{     $zys = floor($sj/$list) +1;}

echo $zys;

分页信息:
<?php

include("DBDA.php");$db = new DBDA();

include("page.class.php");

$sql = "select count(*) from Nation";$zs = $db->StrQuery($sql);

$page = new Page($zs,2);

$sqlsj = "select * from Info ".$page->limit;//echo $sqlsj;echo $db->JsonQuery($sqlsj);

				
时间: 2024-10-15 18:12:01

无刷新页面分页的相关文章

ASP.NET—015:ASP.NET中无刷新页面实现

原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的问题.使用了ajax.js的方法:$.post和$.ajax. http://blog.csdn.net/yysyangyangyangshan/article/details/22755007和http://blog.csdn.net/yysyangyangyangshan/article/det

ASP.NET ashx实现无刷新页面生成验证码

现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: 1 <div> 2 <span>Identifying Code:</span> 3 <asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength="4">&

JSF中使用f:ajax标签无刷新页面改变数据

ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的facelets内置了一个ajax标签,可用于简单的ajax操作. f:ajax 有几个常用属性,分别是:event.listener.render. 1.event:event 对应一个js事件名,该事件名省略了开头的”on“字符,例如点击事件是onclick,那么只需要填入click即可.类似事件还

form 无刷新页面提交表单

表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targetIfr"> <input type="text" name="name"/> </

采用AJAX + history api做无刷新页面的分页

大家都知道浏览器有一个history对象是用来保存浏览历史的,比如一个窗口访问了两个个页面,那么history.length属性等于2. history api在H5时代新增了两个方法,pushState和replaceState 从名字就可以知道一个是新增一条记录一个是改变当前那么记录. 用AJAX加history做分页的好处就是既提高了用户体验,支持前进后退,加快页面加载速度又对搜索引擎十分友好 首先我们来判断浏览器是否支持pushState/replaceState if(!!(windo

通过XMLHttpRequest和jQuery两种方式实现ajax(即无刷新页面获取数据)

一.XMLHttpRequest实现获取数据 不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现:js代码如下: //1.获取a节点,并为其添加Oncilck响应函数document.getElementsByTagName("a")[0].onclick = function(){ //3.创建一个XMLHttpRequest(); var request = new XMLHttpRequest(); //4.准备发送请求的数据ur

一段异步无刷新的分页代码

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js分页</title> <style type="text/css"> div,ul,li,body { margin: 0; padding: 0; f

8. H5 pushState/popstate + ajax开发无刷新页面

css *{ margin: 0; padding: 0; } .m-a{ float: left; width: 100px; } .m-a a{ display: block; height: 30px; line-height: 30px; text-align: center; border: 1px solid #000; } .m-a a.on{ background-color: #ccc; } .con{ float: left; width: 300px; height: 30

html5 history实现无刷新页面

注:要在服务器下运行 <body><a href="test1.html" class="history">点击我跳到test1.html页面</a><a href="index1.html" class="history">点击我跳到index1.html页面</a><a href="hello.html" class="hist