利用ajax完成无刷新分页的功能

 

利用ajax完成无刷新分页的功能 aspx+ashx  动软三层 分页存储过程

首先写出分页最好用一下存储过程

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

--存储过程 create proc usp_GetPagedPhotos  @pageIndex int,  @pageSize int,  @pageCount int output as  declare @n int  select @n=COUNT(*) from Photos  set @pageCount = CEILING(@n*1.0/@pageSize) --ceiling 天花板 把浮点型以小数点分割左边整数加一取整 2.1→3 @n*1.0转换成浮点型除以一个整数就可以是一个浮点型数了  select * from  (select *,ROW_NUMBER() over(order by ptime desc) as num from Photos) as t  where num between (@pageIndex-1)*@pageSize + 1 and @pageIndex*@pageSize  order by PTime desc

　

--这样就可以通过输入第几页，一页有多少条数据可以得出要显示的数据以及返回一共有多少页

DAL层（调用动软代码生成器的dbsqlhelper执行存储过程）

      

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

public DataSet GetPagedData(int pageIndex, int pageSize, out int pageCount)       {           SqlParameter[] param = {                                  new SqlParameter("@pageIndex",SqlDbType.Int),                                   new SqlParameter("@pageSize",SqlDbType.Int),                                    new SqlParameter("@pageCount",SqlDbType.Int)                                  };           //设置输入参数           param[0].Value = pageIndex;           param[1].Value = pageSize;             //设置输出参数           param[2].Direction = ParameterDirection.Output;               DataSet ds = Maticsoft.DBUtility.DbHelperSQL.RunProcedure("usp_GetPagedPhotos", param, "photos");             //执行完存储过程，获取输出参数的值           pageCount = Convert.ToInt32(param[2].Value);             return ds;       }

　　

BLL 层（ 转成泛型集合，调用动软生成的 datatable to list方法）

?

1 2 3 4 5 6

public List<Photos> GetPagedData(int pageIndex, int pageSize, out int pageCount)     {         DataSet ds = dal.GetPagedData(pageIndex, pageSize, out pageCount);           return DataTableToList(ds.Tables[0]);     }

　　

个人比较喜欢先写ashx页面 ，想：ajax用json数据比较好 而且c#里有专门处理list to json的一个良好的机制方法 Serialize （内部原理就是object to string,序列化）

       

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

PhotosBLL bll = new PhotosBLL();       //准备传过来的参数       int index=int.Parse(context.Request.QueryString["index"]);       int pagesize=int.Parse(context.Request.QueryString["page"]);       //准备输出的总页数       int count;         List<Photos> list = bll.GetPagedData(index, pagesize, out count);            JavaScriptSerializer jss = new JavaScriptSerializer();       //将泛型集合转换成json对象       string json = jss.Serialize(list);       //[{"key":value,"key":value},{"key":value,"key":value}]       //此时的json对象里没有总页数，所以要把总页数拼接到json对象中进行传递,拼接的时候要注意json对象的格式       json = json.Replace("]",",{\"count\":"+count+"}]");       //[{"key":value,"key":value},{"key":value,"key":value},{"count":4}]       context.Response.Write(json);

　　

  
现在开始写jquery ajax

html结构

<div id="left">
            <img src="../images/1.gif" /></div>
            <div id="right">
            <div id="p">
            
            </div>
            <br />
            <div id="page">
                <ul>
                 <li><a href="#" id="firstpage">首页</a></li>
                <li><a href="#" id="beforepage">上一页</a></li>
                <li><a href="#" id="nextpage">下一页</a></li>
                <li id="pagelist"><a href="#">1</a><a href="#">2</a><a href="#">3</a></li>
                <li>当前页： <span id="pages"></span> </li>
                 <li><a href="#" id="lastpage">尾页</a></li>
                </ul>
            </div>
            </div>
            <div class="coverholder">
        <input type="text" />
        <input type="button" id="btn1" value="cancel" />
    </div>
 

 

 
重量级人物来了jquery ajax

第一次加载页面，写成方法，传入index（第几页） page(一页几条数据)
   

  function loadps(index, page) {
  
  //$.getJSON ,$.get ,$.post 是对$.ajax 的一个封装 这里传过来的是json数据源 用$.getJSON 最好
             $.getJSON("GetPagedAjax.ashx?" + Math.random(), { "index": index, "page": page }, function (json) {

                //获取页数，为全局变量赋值
                pagesize = json[json.length - 1].count;

                //动态生成表格
                var $tb = $("<table id='tbPhotos'></table>");
                $("#p").append($tb);

                var $th = $("<tr><th>序号</th><th>标题</th><th>图片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>");
                $tb.append($th);
                 
     //过滤掉最后一个非数据源  json.length - 1
                for (var i = 0; i < json.length - 1; i++) {
                    var $tr = $("<tr></tr>");
                    $tb.append($tr);
                    //第一个td
                    var $td = $("<td>" + (i + 1) + "</td>");
                    $tr.append($td);

                    //
                    $td = $("<td><a href='04-PhotoDetails.aspx?pid=" + json[i].PId + "'>" + json[i].PTitle + "</a></td>");
                    $tr.append($td);

                    //
                    $td = $("<td><img src='../images/" + json[i].PUrl + "' width='150px'/></td>");
                    $tr.append($td);

                    //
                    $td = $("<td>" + json[i].PClicks + "</td>");
                    $tr.append($td);

                    $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/85.gif' /><span>" + json[i].PUp + "</span></a></td>");
                    $tr.append($td);

                    $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/86.gif' /><span>" + json[i].PDown + "</span></a></td>");
                    $tr.append($td);

                   //注意此时的时间转换，这里我写了一个方法(ChangeDateFormat(time))在外面，下面会写出来
                    $td = $("<td>" + ChangeDateFormat(json[i].PTime) + "</td>");
                    $tr.append($td);

                    //
                    $td = $("<td>编辑  删除</td>");
                    $tr.append($td);

                    //显示当前页面
                    $("#pages").text(index + "/" + pagesize);
                }
               
            });
      }

 

补充方法（小问题，小麻烦）ChangeDateFormat(time)
  
 

//转换正确的时间格式
function ChangeDateFormat(cellval) {
    var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return date.getFullYear() + "-" + month + "-" + currentDate;
}

 

动态生成表格的拼接过程很无聊……
  
在页面加载的时候加载该方法

总的代码结构如下：

 <script type="text/javascript">  
    //定义三个全局变量 index page pagesize, 并赋初值，注意:尽量少使用全局变量，全局变量的作用域在整个JS文件里。
 //特别是在引用其它外部JS的时候，如果外部JS里有申明了这个变量了，就会出现冲突。本次为了方便理解才使用的。jquery里一般是使用匿名方法所以就没有考虑。
 //定义全局变量是为了点击下一页的时候可以记录当前的index  
 //index 第几页， page 每页几条 pagesize 一共有几页。
           var index = 1;
           var page = 4;

            //首次加载页面
           loadps();
           //页面总数 ,首次加载的时候就为 pagesize 赋值了
           var pagesize = 0;
     
   function loadps()｛……｝

     $(function ()｛……｝);  //写上一页，下一页等点击事件
  
</script>

 

　

现在写相关事件
  

$(function () {
               //首页
               $('#firstpage').click(function () {
                   if (index != 1) {
                       index = 1;
                       loadps();
                   }
                   return false;
               });
               //尾页
               $('#lastpage').click(function () {
                   if (index != pagesize) {
                       index = pagesize;
                       loadps();
                   }
                   return false;
               });
               //上一页
               $("#beforepage").click(function () {
                   if (index != 1) {
                       index = index - 1;
                       loadps();
                   }
                   return false;
               });

               //下一页
               $("#nextpage").click(function () {
                   if (index < pagesize) {
                       index = index + 1;
                       loadps();
                   }
                   return false;
               });

           })

 

　

总结：感觉上面原来ajax就这点东西，不过就是拿数据，拼接表格，显示。重点就只有 $.getJSON 方法的使用、处理JSON数据和用jquery拼接表格  不过小细节也应该注意。
 jquery 里的ajax方法，它把js里的创建xmlhttprequest对象的过程大大的简化了。
最重要的最简单的是利用json数据，json简化对字符串的处理，它是以对象的方式进行传递的，而C#也对它作以迎合，我们何简而不为呢？