• 如果网盘的下载失效,请在对应的文章下评论告知,我会尽快进行处理
  • 想要自己的评论显示漂亮的头像吗?可以在个人中心的个人资料里进行头像设置
  • 本站压缩包仅支持WinRAR 5以上版本解压,如果提示解压错误,请在本站搜索WinRAR下载更新
  •    4年前 (2013-12-03)  各种教程 |   抢沙发  722 
    文章评分 0 次,平均分 0.0

    我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax。下边我们一步一步看看使用jQuery、JSON、Ajax和微 软jQuery Template插件组合实现jQuery 无刷新分页,希望能给你一些帮助。
    使用jQuery Pagination插件实现无刷新分页功能

    先看看HTML标记,分别用来呈现数据项和分页样式显示,如下:

    1. <!--显示列表-->
    2. <div id="content-left"></div>
    3. <!--分页样式显示-->
    4. <div id="Pagination" class="pagination"></div>
    5. <!--jQuery Templates-->
    6. <script id="Template" type="text/html">
    7. <div class="item">
    8.     <h3><a href="${Url}" target="_blank">${Title}</a></h3>
    9.     <p>${Subject}</p>
    10. </div>
    11. </script>

    下边就需要取得我们所需要的数据了,如果你看过前两篇jQuery Templates的文章,你就会意识到我们需要返回javascript对象来进行数据的绑定,这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构:

    1. var req={
    2.         "articlelist":
    3.         [
    4.             {"Title":"文章标题1","Url":"文章Url1","Subject":"文章概要1"},
    5.             {"Title":"文章标题2","Url":"文章Url2","Subject":"文章概要2"},
    6.             {"Title":"文章标题3","Url":"文章Url3","Subject":"文章概要3"}
    7.         ]
    8.     };

    为了方便很多新学习JSON的朋友,在这里给出点后台输出JSON的C#代码,如下:

    1. if (dt != null && dt.Rows.Count > 0)
    2. {
    3.     StringBuilder strResult = new StringBuilder();
    4.     strResult.Append("{\"articlelist\":[");
    5.     foreach (DataRow dr in dt.Rows)
    6.     {
    7.         strResult.Append("{\"Title\":\"" + dr["Title"].ToString() + "\",");
    8.         strResult.Append("\"Url\":\"" + dr["Url"].ToString() + "\",");
    9.         strResult.Append("\"Subject\":\"" + dr["Subject"].ToString() + "\"},");
    10.     }
    11.     //移除末尾',' 
    12.     strResult.Remove(strResult.Length - 1, 1);
    13.     strResult.Append("]}");
    14.     //输出json 
    15.     Response.Write(strResult.ToString());
    16.     Response.End();
    17. }

    关于JSON本站中已经有很多次提到了,如果有不了解的可以找找。这样当我们使用"articlelist"时,它就相当于一个对象数组,使得我们很容易的能绑定数据。下边是前台代码:

    1. $(document).ready(function () {
    2.     //TotalNum 总数 这里写死了 
    3.     var TotalNum = 200;
    4.     //首次加载 
    5.     pageselectCallback(0);
    6.     //分页事件 
    7.     $("#Pagination").pagination(200, {
    8.         prev_text: "上一页",
    9.         next_text: "下一页",
    10.         num_edge_entries: 2,
    11.         num_display_entries: 8,
    12.         //回调 
    13.         callback: pageselectCallback
    14.     });
    15.     function pageselectCallback(page) {
    16.         var result = "";
    17.         $.ajax({
    18.             type: "post",
    19.             dataType: "json",
    20.             url: "getdata.aspx", //请求的url 
    21.             data: { "page": parseInt(page + 1) },
    22.             success: function (req) {
    23.                 //使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁 
    24.                 $("#content-left").html($("#Template").render(req.articlelist));
    25.             }
    26.         });
    27.     }
    28. });

    这样,我们就使用jQuery pagination实现了无刷新分页,文中并没有过多的介绍jQuery pagination,而是将侧重点置于jQuery Templates的使用。因为本人觉得jQuery pagination还是很容易使用的,最终的效果可在Demo中看看。

     

    欢迎加入伤逝的安详博客2000人QQ群进行交流,点击加群     如果想请站长喝杯茶,点这里

    伤逝的安详网站是由系统与软件爱好者阿斯兰萨拉建立,旨在分享更多更好的软件、教程、资讯等内容。如果您有好的文章想在本站发布,欢迎注册后在个人中心进行投稿。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册