ASP AJAX 静态分页第1/2页
<html>
<head>
<title>AJAX静态分页演示：http://www.jb51.net</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
body { text-align:center;font:14px Verdana,sans-serif; }
a:link,a:visited { color:#00f;text-decoration:none; }
a:hover { color:#f00;text-decoration:underline; }
#main { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; }
#title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; }
#left { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; }
#right { float:left;width:50%;text-align:right; }
#content { width:100%;margin:10px 0;clear:both; }
#download { width:100%;margin:10px 0;line-height:150%; }
-->
</style>
<script type="text/javascript">
<!--
function createAjax() { //该函数将返回XMLHTTP对象实例
var _xmlhttp;
try {
_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式
}
catch (e) {
try {
_xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式
}
catch (e) {
_xmlhttp=false; //如果创建失败，将返回false
}
}
return _xmlhttp; //返回xmlhttp对象实例
}
function getweblist(page) { //该函数用来获取分页数据
var xmlhttp=createAjax(); //创建变量xmlhttp，并将createAjax()函数创建的对象实例赋于它
if (xmlhttp) { //如果xmlhttp对象创建成功，则执行条件语句中的程序
var content=document.getElementById('content'); //获取页面中id为content的对象
xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打开与服务器的连接，其中get为连接方式，server.asp为要连接的页面，有两个参数，其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数，这样每次发送的URL都会不一样，相当于都向服务器发出一个新的请求，避免浏览器缓存数据。
xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件，改属性值改变时，则会执行其中的程序
if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时，执行条件中的程序，其中readyState有五个值，4为请求完成，是客户端向服务器提交的数据成功到达，status有N多值-_-!!，其中200为OK，是指服务器向客户端完成发送数据。
content.innerHTML=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。
}
else {
content.innerHTML='<span style="color:red">正在从服务器提取数据......</span>'; //如果服务器没有完成传送，则向用户提示正在传输。
}
}
xmlhttp.send(null); //向服务器发送请求，因为是get请求，会直接附在URL后面，所以这里括号中的数据为null，IE中也可以不写，但FF就必须加上null，否则会发送失败。
}
}
function edit() { //编辑分页显示条数的函数
var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定义html字符串
var right=document.getElementById('right'); //获得页面中的right对象。
right.innerHTML=str; 将str变量的值写入该对象中。
}
function rightinfo() { //right对象中的原始信息，请在页面开始和被显示条数被修改后调用
document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每页显示条数">Edit</a>';
}
function save() { //保存修改后的显示条数
var pagesize=document.getElementById('pagesize'); //这个就不写了，跟上面的用法一样。
if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //确定用户输入的新数据是不是一个数字
alert("请正确填写每页显示条数！ ");
return;
}
var xmlhttp=createAjax(); //创建对象
if (xmlhttp) {
xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //参上同看
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('right').innerHTML=unescape(xmlhttp.responseText); //先写入从服务器返回的字符串，如果成功，会写入completed。
getweblist(1); //从新获取新修改后的第一页的数据
setTimeout('rightinfo()',3000); //3秒后将right对象的原始字符串写入。
}
else {
document.getElementById('pagesize').disabled=true; //将几个FORM表单的元素都设为不可改动
document.getElementById('savebtn').disabled=true;
document.getElementById('cancelbtn').disabled=true;
}
}
xmlhttp.send(null); //发送请求。
}
}
//-->
</script>
</head>
<body onload="getweblist(1);rightinfo();">
<div id="main">
<div id="title">
<div id="left">静态分页的AJAX实现</div>
<div id="right"></div>
</div>
<div id="content"></div>
<div id="download">
作者：十一狼<br />
联系：275915854(QQ) 112183883@163.com(email)<br />
下载：<a href="http://www.jb51.net" target="_blank">http://www.jb51.net</a>
</div>
</div>
</body>
</html>
当前1/2页 12下一页阅读全文
相关推荐
-
AJAX分页的代码(后台asp.net)
在ASP.NET 中有很多数据展现的控件,比如用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的.AJAX的分页可以很好的解决这些问题. 开发的坏境是:jQuery AJAX+Northwind. 具体的步骤: SearchCustomer.aspx:
-
AJAX和三层架构实现分页功能具体思路及代码
复制代码 代码如下: -----------------------------HTMLPage1.htm--------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> table{ border:solid 1px #44
-
无框架 Ajax分页(原创)第1/2页
使用如上方法确实可以实现Ajax分页效果,但我总觉得不够简洁,研究了一下午,终于捣鼓出了点东西O_o首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager
-
Ajax PHP分页演示
今天看默默讲解分页,想想好像原创区很久没人发帖了,就顺便把默默的那个扩展开来,来个PHP+AJAX分页演示吧,好的,说来就来,首先我们依然是基本的AJAX开发框架: 复制代码 代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpReque
-
用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur
-
基于AJAX的分页类实现代码
复制代码 代码如下: /** * <p>pagination.js * <p>通用的基于AJAX的分页类 * @author jeanwendy * @version 1.0 */ var paginationIndex = 0; var pagination = function(trTemplatId) { $().ajaxStart(function() { $.blockUI({ message : '<table>
-
ajax实现无刷新分页(php)
复制代码 代码如下: <!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=&quo
-
asp+ajax实现静态页面分页的代码
最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下: 复制代码 代码如下: <html> <head> <title>AJAX静态分页</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css&quo
-
php ajax无刷新分页,支持id定位
<?php Header("Content-Type:text/html; charset=utf-8"); function AjaxPage($Total,$ListNub,$CurrentPage,$Url,$AjaxAction,$HalfPer='',$ViewId='') { //计算总页数 $totalPage = @ceil($Total/$ListNub); $total=$totalPage-1; $re=""; //echo $Curre
-
ASP AJAX 静态分页第1/2页
<html> <head> <title>AJAX静态分页演示:http://www.jb51.net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> <!-- body { text-al
-
php ajax 静态分页过程形式
复制代码 代码如下: js 端 及判断 <script language='javascript' > $(function(){ //var url=$(this)[0].location.href; //alert(url); goPageFirst(); $('#selpage').bind('change',goPage); }); //返回当前页数 function getNowPage() { return parseInt($('#nowPage').html()); } //返
-
asp.net+Ajax 文本文件静态分页实现代码
服务端部分 ,文本文件分页的类.主要在流中处理.当然我看过网上的用</br> 关键字进行分页的 个人觉得不是所有时候都能满足要求,所一自己写了这个,还是费了点时间,主要在于本人太笨,基础很差.希望大家个出更好的建议 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.IO; namespace Txt { public class TxtPager { public
-
ASP.NET静态页生成方法
本文实例讲述了ASP.NET静态页生成方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 由于业务需要,得把页面按照模板页生成静态页面,所以自己就琢磨了下,写些思路,以备日后需要的时候用. 二.解决方法: 静态页生成用到最多的就是匹配跟替换了,首先得读取模板页的html内容,然后进行你自己定义的标签匹配,比如说我要把我定义的标题标签换成读取数据库的标题内容,那么可以直接读取数据库的标题,然后直接进行替换,然后生成html文件就OK了. 具体代码如下: 复制代码 代码如下: /// <su
-
asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页
ListView控件本身并没有分页功能,不过借助于ASP.NET中新增加的DataPager控件,我们可以非常方便地对ListView中的数据设置分页,这几乎不需要开发人员写一行代码,将ListView控件放到页面上,设置好布局和DataSource,然后再添加一个DataPager控件,将它的PagedControlID属性设置成ListView的ID,PageSize中设置每页要显示的数据条数,然后在Fields中设置好分页的样式(当然你完全可以不用去管样式,ASP.NET会根据内置的样式来
-
asp.net+ajax简单分页实例分析
本文实例讲述了asp.net+ajax简单分页实现方法.分享给大家供大家参考,具体如下: 这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: /*testJs.js*/ // 此函数等价于document.getElementById /document.all fun
-
ASP.NET使用ajax实现分页局部刷新页面功能
listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <
-
JavaScript仿静态分页实现方法
本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {
-
laypage前端分页插件实现ajax异步分页
本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数