您当前的位置: 首页 > 技术文章 > 前端开发

jQuery 插件-使用jQuery Pagination实现无刷新分页

作者:licqi 时间:2013-12-03阅读数:人阅读

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

首先,我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件,很多人可能还对jQuery Templates不太熟悉,你可以看看jQuery插件-微软 jQuery Templates微软 jQuery Templates插件的使用这两篇文章。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script>
<script src="http://www.jquery001.com/js/jquery.pagination.js" type="text/javascript"></script>

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

<!--显示列表-->
<div id="content-left"></div>
<!--分页样式显示-->
<div id="Pagination" class="pagination"></div>
<!--jQuery Templates-->
<script id="Template" type="text/html">
<div class="item">
    <h3><a href="${Url}" target="_blank">${Title}</a></h3>
    <p>${Subject}</p>
</div>
</script>

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

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

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

if (dt != null && dt.Rows.Count > 0)
{
    StringBuilder strResult = new StringBuilder();
    strResult.Append("{"articlelist":[");
    foreach (DataRow dr in dt.Rows)
    {
        strResult.Append("{"Title":"" + dr["Title"].ToString() + "",");
        strResult.Append(""Url":"" + dr["Url"].ToString() + "",");
        strResult.Append(""Subject":"" + dr["Subject"].ToString() + ""},");
    }
    //移除末尾','
    strResult.Remove(strResult.Length - 1, 1);
    strResult.Append("]}");
    //输出json
    Response.Write(strResult.ToString());
    Response.End();
}

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

$(document).ready(function () {
    //TotalNum 总数 这里写死了
    var TotalNum = 200;
    //首次加载
    pageselectCallback(0);
    //分页事件
    $("#Pagination").pagination(200, {
        prev_text: "上一页",
        next_text: "下一页",
        num_edge_entries: 2,
        num_display_entries: 8,
        //回调
        callback: pageselectCallback
    });

    function pageselectCallback(page) {
        var result = "";
        $.ajax({
            type: "post",
            dataType: "json",
            url: "getdata.aspx", //请求的url
            data: { "page": parseInt(page + 1) },
            success: function (req) {
                //使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁
                $("#content-left").html($("#Template").render(req.articlelist));
            }
        });
    }
}); 

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

原文链接:http://www.jquery001.com/use-jquery-pagination-to-fulfill-pagination.html

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~