基于asp.net的ajax分页
直接贴代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JERRY-lala的幸福时刻</title>
<style type="text/css">
body {
background-image: url(http://bcs.duapp.com/jerryhutu/wed%2Fbg.jpg);
background-repeat: no-repeat;
background-position:top center;
background-attachment:scroll;
margin-top: 0px;
margin-bottom: 0px;
min-height:1684px;
height:auto;
_height:1684px;
text-align:center;
}
a,a:hover {text-decoration:none;}
.content-box {width:710px; margin:75px auto 95px; position:relative;display:inline-block;}
.content {padding:0 18px 0 38px;background:#fff;height:85px;text-align:left;}
.title{height:58px;margin-top:20px;}
.title-con {}
.fl {float:left; height:60px;}
.fr{float:right}
.cf:after {content:"";clear:both;display:block;height:0;overflow:hidden}
.cf {zoom:1;}
.zi666 {color:#666;}
.zi333 {color:#333;}
.zi999 {color:#999;}
.item {margin-top: 20px;}
.list {padding:11px 18px;height:55px;background:#F7F2FF;position:relative;font-size:14px;margin-bottom:10px;}
.list-img {width:50px;height:50px;}
.zi-name {color:#6600FF; font:bold;font-size:14px;}
.zi-con {color:#333;font-size:12px;}
.zi-name,.zi-con {padding-left:70px;}
.date {position:absolute;top:12px;right:18px;color:#999;font-size:12px;}
.lh24 {line-height:24px;}
.fs12 {font-size:12px;}
#ma {cursor:pointer;vertical-align:middle;}
#ma-clone {display:none;width:258px;height:258px;position:absolute;top:400px;left:50%;margin-left:-129px;}
/*-----------paginaton----------*/ /*-----------/paginaton----------*/
.pagination {
text-align:center;
font-family:arial;
}
.pagination .pg-list {
vertical-align:top;
display:inline-block;
*display:inline;
*zoom:1
}
.pagination .pg-list a {
display:inline-block;
*display:inline;
*zoom:1;
height:22px;
line-height:22px;
padding:0 9px;
margin-right:4px;
border-style:solid;
border-width:1px;
border-color:#CCC;
color:#666
}
.pagination .pg-list a:hover {
text-decoration:none;
border-color:#6600FF
}
.pagination .pg-list a.prev,.pagination .pg-list a.next {
padding:0 11px;
background:#F4F4F4
}
.pagination .pg-list a.disabled {
color:#ABABAB;
cursor:default
}
.pagination .pg-list a.disabled:hover {
border-color:#6600FF
}
.pagination .pg-list span {
display:inline-block;
*display:inline;
*zoom:1;
height:22px;
line-height:22px;
padding:0 9px;
margin-right:4px;
border-style:solid;
border-width:1px;
border-color:#6600FF;
background:#6600FF;
color:#FFF
}
.pagination .pg-skip {
vertical-align:top;
display:inline-block;
*display:inline;
*zoom:1
}
.pagination .pg-skip .num {
width:40px;
height:14px;
padding:4px;
border:1px solid #ccc;
text-align:center
}
.pagination .pg-skip .btn {
display:inline-block;
*display:inline;
*zoom:1;
width:48px;
border:0;
height:24px;
line-height:24px;
background:#f60;
color:#FFF;
cursor:pointer;
text-align:center
}
.pagination input {
width:30px;
height:21px;
margin:0 8px;
border:solid 1px #999;
vertical-align:top;
font-family:Arial,SimSun;
text-align:center
}
.pagination i {
vertical-align:middle;
font-style:normal;
display:inline-block;
*display:inline;
*zoom:1;
height:24px;
line-height:24px
}
.pagination button {
border:0;
background:#f60;
color:#fff;
width:51px;
height:24px;
vertical-align:top
}
.pagination form {
display:inline-block;
*display:inline;
*zoom:1
}
</style>
<script src='http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js'></script>
</head>
<body>
<div class="content-box">
<img src="http://bcs.duapp.com/jerryhutu/wed%2Fbanner.jpg">
<div class="content">
<div class="title cf">
<div class="fl title-con">
<img src='http://bcs.duapp.com/jerryhutu/wed%2Fshare.gif'>
<div class="lh24 fs14 zi666">
使用微博扫描右侧二维码，关注后发送内容即可留言</div>
</div>
<div class="fr">
<span class="fs12 zi666">点击放大>></span>
<img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width="58" height="58"
id="ma">
</div>
</div>
<div class="item">
</div>
<div class="pagination">
<p class="pg-list">
<a class="page disabled" href="">上一页</a> <span class="page-cur">1</span> <a href="">
2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> ... <a href="">11</a>
<a href="">12</a> <a href="" class="next">下一页</a> </p>
</div>
<!-- <div><img src="http://wxscreen-wxscreen.stor.sinaapp.com/20130803170547000000_1_40279_1031.png"></div>> -->
</div>
</div>
<img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width='258' height="258"
id="ma-clone">
<script>
$("#ma").click(function (e) {
e.stopPropagation();
$("#ma-clone").show();
});
$(document).click(function () { $("#ma-clone").hide();
});
</script>
</body>
</html>
<script type="text/javascript">
function paginator(obj, func, splitnum) {
var page_count = obj.page_count;
var page_no = obj.page_no;
var page_size = obj.page_size; var num = splitnum * 2;
var start = 1;
var end = splitnum * 2;
var prev = 1;
var next = page_no + 1;
if (page_no > page_count)
page_no = page_count;
if (page_no <= 0)
page_no = 1;
if (page_no > 1) {
prev = page_no - 1;
}
if (next > page_count) {
next = page_count;
} if (page_count > 1) {
if (end > page_count)
end = page_count; if (page_no + splitnum <= page_count) {
start = page_no - (splitnum - 1);
end = page_no + splitnum;
}
else {
start = page_count - (num - 1);
end = page_count;
} }
if (start < 1) start = 1;
end = end > page_count ? page_count : end;
var html = '<a href="javascript:void(0);" class="prev" onclick="' + func.replace('{pageIndex}', prev + '') + ';">上一页</a>';
for (i = start; i <= end; i++) {
if (i == page_no) {
html += '<span class="c">' + i + '</span>';
}
else
html += '<a href="javascript:void(0)" onclick="' + func.replace('{pageIndex}', i + '') + ';">' + i + '</a>'; } if (page_no == page_count) {
html += '<a href="javascript:void(0)" class="next">下一页</a>';
} else {
html += '<a href="javascript:void(0)" class="next" onclick="' + func.replace('{pageIndex}', next + '') + ';">下一页</a>';
}
return html;
}
//每页显示的数据行数
var pagesize = 3;
var json = { "page_count": 0, "page_no": 1, "page_size": pagesize }; function GetPation(pageindex) {
//ajax请求数据
var dataBind = "";
$.ajax({
url: 'UserMessages.aspx',
type: 'GET',
data: 'pageSize=' + pagesize + '&pageIndex=' + pageindex,
dataType: 'json',
timeout: 60000,
error: function () { },
success: function (data) {
$.each(data.result, function (key, val) {
dataBind += '<div class="list"><img src="' + val.Uimg + '" class="fl list-img"><div class="zi-name">' + val.Uname + '</div><div class="zi-con">' + (val.MsgType == "1" ? val.Content : (val.MsgType == '3' ? '<img src="' + val.ImgUrl + '" style="width:40px; height:30px"/>' : '')) + '</div><div class="date">' + val.Ctime + '</div></div>'; }); $('.item').html(dataBind);
json.page_count = data.pagination.page_count;
json.page_no = data.pagination.page_no;
//分页
if (json.page_count > 1) {
$('.pg-list').html(paginator(json, "GetPation({pageIndex})", pagesize));
$('.pg-list').show();
} else {
$('.pg-list').hide();
} }
});
}
//刷新页面
function F5_Page() {
if (json.page_no==1) {
$('.item').html("<div style='margin-left:230px;margin-bottom:30px; margin-top:200px'><img src='/img/loading.gif'/>正在刷新数据，请稍后...</div>");
setTimeout(function () { GetPation(1); }, 2000); }
}
GetPation(1);
//五秒后执行刷新
setInterval("F5_Page()", 5000); </script>
基于asp.net的ajax分页的更多相关文章
- 不知道算不算另类的ASP.NET MVC4 Ajax分页
以往用Ajax来实现无刷新分页,用户一按F5,页数就记不住了,点了一个链接也是同一个问题,再想回退回来,就回到第一页了.上次看到一篇文章,说到window.location.hash的用途,于是萌生了 ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- 源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
随机推荐
- MES生产日报存储过程
USE [ScreenMonitor]GO/****** Object: StoredProcedure [dbo].[ImportProductForDay] Script Date: 04/11/ ...
- 剑指OFFER之重建二叉树（九度OJ1385）
题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...
- 理解Windows中的路由表和默认网关
每一个Windows系统中都具有IP路由表,它存储了本地计算机可以到达的网络目的地址范围和如何到达的路由信息.路由表是TCP/IP通信的基础,本地计算机上的任何TCP/IP通信都受到路由表的控制. 理 ...
- usr/bin/ld: cannot find 错误解决方法
参考:http://blog.siyebocai.cn/20100324_5p424qs7.html 通常在软件编译时出现的usr/bin/ld: cannot find -lxxx的错误,主要的原因 ...
- LCD_ILI9320横竖屏方向的问题。
发现仅仅设置R03H是不能设置方向的,还需要设置R32H,R33H的坐标位置. 比如我现在是 R03H=0x1000H,R20H=239-x,R21H=319-y:竖直正向 R03H=0x1030H, ...
- 【M2】最好使用C++转型操作符
1.C语言中的转型操作符有两个问题: a.是个通用的转换操作符,也就是说,可以从一个类型转换到其他类型.通用必定是低效率和冗余的,因为要考虑很多情况. b.在代码中,难以辨认出哪些是类型转换. 2.C ...
- Codeforces Beta Round #51 B. Smallest number dfs
B. Smallest number Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/pro ...
- ADO.NET中使用事务进行数据库读写的办法
使用事务一般是进行数据写入,数据读取一般是不需要这货的 第一种办法: 使用存储过程: 顾名思义,在存储过程中定义好变量,定义好事务开始,结束,错误回滚然后在ADO.NET中正常调用存储过程的方法就行 ...
- XtraBackup原理5
http://www.cnblogs.com/gomysql/p/3650645.html xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有 ...
- 从一行代码里面学点JavaScript
从一行代码里面学点JavaScript 现如今,JavaScript无处不在,因此关于JavaScript的新知识也是层出不穷.JavaScript的特点在于,要学习它的语法入门简简单,但是要精通使用 ...