ASP-AJAX-分页格式

HTML:

 1 <html>
 2 <head>
 3 <title>Mazey</title>
 4 <meta name="description" content="" />
 5 <meta name="keywords" content="" />
 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 7 <!-- Mazey's CSS -->
 8 <link type="text/css" href="http://www.mazey.cn/css/mazey-base.css" rel="stylesheet" />
 9 <link type="text/css" href="css/records-main.css" rel="stylesheet" />
10 <!-- Mazey's jQuery -->
11 <script language="javascript" type="text/javascript" src="http://www.mazey.cn/js/plugin/jquery/jquery-2.1.1.min.js"></script>
12 <!-- Mazey's Bootstrap -->
13 <link type="text/css" href="http://www.mazey.cn/config/frame/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
14 <script language="javascript" type="text/javascript" src="http://www.mazey.cn/config/frame/bootstrap/js/bootstrap.min.js"></script>
15 <!-- Mazey's Layer -->
16 <script language="javascript" type="text/javascript" src="http://www.mazey.cn/js/plugin/layer/layer.js"></script>
17 <script language="javascript" type="text/javascript" src="http://www.mazey.cn/js/plugin/layer/mazey-layer.js"></script>
18 <!-- Records-System's Favicon -->
19 <link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
20 </head>
21 <body>
22 <!--header-->
23 <div class="header">
24 </div>
25 <!--content-->
26 <section class="content">
27     <div class="table-domain container">
28         <div class="row">
29             <div class="col-sm-12" id="domain-content">
30                 <table class="table table-striped table-bordered table-hover table-responsive">
31                     <thead>
32                         <tr>
33                             <th>load...</th>
34                             <th>load...</th>
35                             <th>load...</th>
36                         </tr>
37                     </thead>
38                     <tbody>
39                         <tr>
40                             <td>load...</td>
41                             <td>load...</td>
42                             <td>load...</td>
43                         </tr>
44                     </tbody>
45                 </table>
46             </div>
47         </div>
48     </div>
49 </section>
50 <!--footer-->
51 <section class="footer">
52 </section>
53 </body>
54 </html>
55 <!-- Records-System's JS -->
56 <script language="javascript" type="text/javascript" src="js/records-main.js"></script>

JavaScript:

 1 function loadInfo(page){
 2     sendInfo="judge=0322&page="+page;
 3     var loadOne = layer.load(2);
 4     $.ajax({
 5         type:"post",
 6         url:"Mazey.cn",
 7         async:true,
 8         timeout:5000,
 9         dataType: "text",
10         data:sendInfo,    
11         success:function(data){
12             layer.close(loadOne);
13             myArr=data.split("-|-")
14             if("0507"==myArr[0]){
15                 $("#domain-content").html(myArr[1]);
16             }else if("0215"==myArr[0]){
17                 $("#domain-content").html(myArr[1]);
18             }
19         },
20         error:function(){
21             layer.close(loadOne);
22             AlertMazey.alertSad("System Error!");
23         }    
24     });
25 }
26 $(document).ready(function(){
27     loadInfo(1);
28     $('#view').on('click', function(){ 
29         loadInfo(413);
30     }); 
31 });

ASP:

 1 <%
 2 dim judge:judge=trim(request.form("judge"))
 3 dim page:page=trim(request.form("page"))
 4 if page="" then page=1
 5 select case judge
 6     case "0322"
 7         connRc.open
 8         sqlFirst=""
 9         session("sqlSearch")=sqlFirst
10         rsMz1.open session("sqlSearch"),connRc,1,1
11         countYes=true
12         if rsMz1.eof then
13             Response.write "0215-|-"
14 %>
15 <table class="table table-striped table-bordered table-hover table-responsive">
16     <thead>
17         <tr>
18             <th>暂无数据</th>
19         </tr>
20     </thead>
21 </table>
22 <%
23             Response.end
24         else
25             rsMz1.PageSize = 10
26             rsPageCount = rsMz1.PageCount
27             flag = page - rsPageCount
28             If Page < 1 or flag >0 then Page = 1
29             rsMz1.AbsolutePage = Page
30             recordcount = rsMz1.recordcount
31         end if
32         response.write "0507-|-"
33 %>
34 <table class="table table-striped table-bordered table-hover table-responsive">
35     <thead>
36         <tr>
37             <th>主题</th>
38         </tr>
39     </thead>
40     <tbody>
41 <%
42         i=1
43         do while not rsMz1.eof and i<11
44 
45 %>
46         <tr>
47             <td>内容</td>
48         </tr>
49 <%
50         i=i+1
51         rsMz1.movenext
52         loop  
53 %>
54         <tr>
55             <td colspan="7">
56                 <a class="btn btn-default disabled page-total">共<%=recordcount%>条记录</a>
57                 <a class="btn btn-default" id="page-begin" οnclick="loadInfo(1);">首页</a>
58                 <a class="btn btn-default" id="page-previous" οnclick="loadInfo(<%=page-1%>);">上一页</a>
59                 <a class="btn btn-default"><%=page&"/"&rsPageCount%></a>
60                 <a class="btn btn-default" id="page-next" οnclick="loadInfo(<%=page+1%>);">下一页</a>
61                 <a class="btn btn-default" id="page-end" οnclick="loadInfo(<%=rsPageCount%>);">末页</a>
62             </td>
63         </tr>
64     </tbody>
65 </table>
66 <%
67         rsMz1.close        
68         connRc.close
69     case else
70         rspend "0215-|-This is an unknown error!"
71 end select
72 %>

 

Asp+AJAX静态分页 亲测 可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Asp+AJAX静态分页</title> <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> [removed] <!-- 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[removed]=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。 } else { content[removed]='<span>正在从服务器提取数据......</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[removed]=str; //将str变量的值写入该对象中。 } function rightinfo() { //right对象中的原始信息,请在页面开始和被显示条数被修改后调用 document.getElementById('right')[removed]='<a href="[removed]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')[removed]=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); //发送请求。 } } //--> [removed] </head> <body> <div id="main"> <div id="title"> <div id="left">Asp+AJAX静态分页</div> <div id="right"></div> </div> <div id="content"></div> </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值