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

 

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

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

--存储过程

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执行存储过程）

      

  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方法）

    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,序列化）

       

  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#也对它作以迎合，我们何简而不为呢？