无刷新分页 Ajax,JQuery,Json
1.数据库设计
字段:Id(int) , Msg(varchar(MAX)) , PostDate(datetime)
2.自定义SQL查询方法(强类型DataSet)
//SelectCount()方法,用于查询总条数
select count(*) from T_Posts
//GetPageData(startRowIndex,endRowIndex)方法,用于查询指定范围,分页功能,
由于不支持over语句,因此需手动增加参数,方法-右键-属性,里面的 Parameters
增加startRowIndex 和 endRowIndex,类型为 Int32
select * from
(
select Id, Msg,PostDate,Row_Number()over(order by PostDate)rownum from T_Posts
)t
where t.rownum>=@startRowIndex and t.rownum<=@endRowIndex
3.HTML设置
<ul id="ulComment"></ul>
<table>
<tr id="trPage"></tr>
</table>
4.处理页设置 WSXFY.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"]; //取得客户提交上来的 action 值
if (action == "getpagecount") //此为查询数据总条数
{
var adapter = new T_PostsTableAdapter();
int count = adapter.SelectCount().Value; //利用自定义SQL方法得到条数
int pagecount = count / ; //条数除以10,得到页数(10条一页)
if (count % != ) //取条数的余数,没有被10整除的,都加1
{
pagecount++;
}
context.Response.Write(pagecount); //输出页数 }
else if(action == "getpagedata") //此为查询详细数据
{
string pagenum = context.Request["pagenum"]; //得到当前页号
int PageNum = Convert.ToInt32(pagenum); //转换成INT型
var adapter = new T_PostsTableAdapter(); //创建DataSet
var data = adapter.GetPageData((PageNum - ) * + ,(PageNum) * );
//使用自定义SQL方法,得到条数范围
List<Comment> list = new List<Comment>(); //创建List类型为Comment
foreach (var row in data) //遍历每一条数据
{
list.Add(new Comment() { Msg = row.Msg, PostDate = row.PostDate.ToShortDateString() });
//将每条数据都增加到List中
}
JavaScriptSerializer jss = new JavaScriptSerializer(); //创建 Json
context.Response.Write(jss.Serialize(list)); //将list转换成Json类型
}
}
public class Comment //创建一个类
{
public string Msg { get; set; }
public string PostDate { get; set; }
}
5. Javascript设置
<script type="text/javascript">
$.post("WSXFY.ashx", { "action": "getpagecount" }, function(data, status) {
for (var i = 1; i <= data; i++) {
var td = $("<td><a href=''>" + i + "</a></td>"); //循环输出页号
$("#trPage").append(td); //将每一个td都附加上去
}
$("#trPage td").click(function(e) {
e.preventDefault(); //阻止执行 href 的地址
$.post("WSXFY.ashx", { "action": "getpagedata", "pagenum": $(this).text() },
function(data, status) {
var comments = $.parseJSON(data); //利用 parseJSON 转换
$("#ulComment").empty(); //清空ul
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var li = $("<li>" + comment.PostDate + ":" + comment.Msg + "</li>"); //生成数据
$("#ulComment").append(li);
}
});
});
});
</script>
无刷新分页 Ajax,JQuery,Json的更多相关文章
- 无刷新删除 Ajax,JQuery
1.数据库用上面的,增加一个 DeleteById 的SQL方法 delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx pu ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。
AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
随机推荐
- poj 1459 Power Network【建立超级源点,超级汇点】
Power Network Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 25514 Accepted: 13287 D ...
- ECharts中文显示为Unicode码
后台遍历出的数据,在ECharts的js中引用为Unicode码 解决方案: <s:property>标签的escape属性默认值为true,即不解析html代码,直接将其输出. 若想要输 ...
- Derby使用2—C/S模式
零.回顾 这部分先来回顾一下上一篇博客中的主要内容.上一篇博客中主要简单介绍了Derby数据的历史,特点,安装以及使用的两种模式.这篇文章主要介绍这两种模式中的一种模式 一.启动服务端程序 第一部分主 ...
- Android内存、性能是程序永恒的话题
内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...
- Android中获取正在运行的应用程序-----ActivityManager.RunningAppProcessInfo类详解
今天继续讲解关于ActivityManager的使用,通过前面一节的学习,我们学会了如何利用ActivityManager获取系统里 正在运行的进程.本文要讲解的知识点是利用这些进程信息获取系统里正在 ...
- Hash表
Hash表 Hash表也称散列表,也有直接译作哈希表,Hash表是一种特殊的数据结构,它同数组.链表以及二叉排序树等相比较有很明显的区别,它能够快速定位到想要查找的记录,而不是与表中存在的记录的关键字 ...
- careercup-树与图 4.2
4.2 给定有向图,设计一个算法,找出两个结点之间是否存在一条路径. 解答 根据题意,给定一个有向图和起点终点,判断从起点开始,是否存在一条路径可以到达终点. 考查的就是图的遍历,从起点开始遍历该图, ...
- 导入cocos2d-x samples android官方示例
导了一晚上samples android示例,查了一晚上资料,费了很大的劲,终于成功导入并运行成功,分享一下经验: 1.下载eclipse与ADT跟android SDK,相信大家都会装了吧. 2.下 ...
- centos6.5 apache+tomcat结合 负载均衡
一. 负载均衡:根据 uri 表达式把请求分发给各个服务器处理.如:/*.jsp = lb_s 就是说把所有jsp请求交给lb_s , 当然它是个Tomcat. 二. 安装配置mod_jk m ...
- AWS 命令行界面 + Python 的 AWS 开发工具包 (Boto3)
安装AWS CLI $ pip install awscli 安装Boto3 $ pip install boto3 设置AWS CLI $ aws configure AWS Access Key ...