无刷新分页 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>[email protected] and t.rownum<[email protected]

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,得到页数(10条一页)
                if (count % 10 != 0)       //取条数的余数,没有被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 - 1) * 10 + 1,(PageNum) * 10);
                              //使用自定义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>

时间: 2024-11-05 20:34:23

无刷新分页 Ajax,JQuery,Json的相关文章

无刷新删除 Ajax,JQuery

1.数据库用上面的,增加一个 DeleteById 的SQL方法delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string id = context.Request["id"]; //得到用户传过

jQuery+AJAX+Struts实现无刷新分页

jQuery+AJAX+Struts实现无刷新分页 说明: 1.需要jQuery插件js文件: 2.使用myeclipse添加struts能力: 从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN('GET/POST',URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式.然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数.如果是使用GET方式提交数据,那么就

javascript;Jquery;获取JSON对象,无刷新分页实例。

js: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>&

无刷新分页 jquery.pagination.js

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $

smarty+php+ajax 简单无刷新分页

简介 分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($pagePrev) ⑤ 下一页($pageNext) ⑥ 判断越界问题 ⑦ 偏移量($offset) ⑧ sql语句($sql = "select * from goods limit $offset,$pageSize";) 简单归简单,我们还得考虑实际的应用.例如:如果你正在土豆网看&

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: [javascript] view plaincopy <span style="font-size:14px;">function paging(page){ $.ajax({ typ

Ajax无刷新分页

<!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> <title></title> <sc

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

Ajax 实现无刷新分页

Ajax 实现无刷新分页