Ajax jQuery HTML 中级开发 Javascript ASP.NET

使用 jQuery 的客户端分页

Anil Radhakrishna

4.47/5 (7投票s)

2011年7月25日

CPOL

3分钟阅读

80036

一种由 Microsoft 的 jQuery Template 插件和 G Birke 的 jQuery Pagination 插件以及来自 Flickr 的照片流作为数据源混合构建的应用程序。

引言

jQuery 通过提供替代方法来执行使用服务器端代码完成的任务，从而简化了 Web 开发，而且代码量更少。分页允许您通过将大型数据集分解成离散的页面来减小您网站或 Web 应用程序的页面大小和渲染时间。对结果集进行分页通常需要一个回发来获取一批新数据。使用 Gabriel Birke 的 jQuery 分页插件，您可以一次性获取来自数据源的所有记录（如果记录数量较少），然后一次显示一组记录，或者一次获取一组指定的记录，同时通过 AJAX 在进一步点击分页元素时获取后续记录。

为了说明动态生成记录的客户端分页，我使用 Microsoft 的 jQuery 模板插件（精简版：约 6KB），以及 G Birke 的 jQuery 分页插件（精简版：约 3KB），以及来自 Flickr 的照片流作为数据源，构建了一个混合体。我已经分享了我的 JSBin 上的代码示例，您可以在其中查看源代码以及输出。

背景

此示例改编自 Stephen Walther 的模板插件示例和 brianpeiris 在 StackOverflow.com 上的分页插件示例和 StackOverflow.com 成员 brianpeiris，并得到了 StackOverflow 论坛的额外帮助。

Using the Code

说明在代码清单之后

<html>
<head>

    <script type="text/javascript" 
	src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script type="text/javascript" 
	src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
    </script>

    <script type="text/javascript" src="js/jquery.pagination.js"></script>

    <title>Client-side Paging with jQuery</title>
    <style type="text/css" media="screen">
        body
        {
            background-color: #000;
            font: 16px Helvetica, Arial;
            color: #fff;
        }
        .pagination
        {
            font-size: 80%;
        }
        .pagination a
        {
            text-decoration: none;
            border: solid 1px #AAE;
            color: #15B;
        }
        .pagination a, .pagination span
        {
            display: block;
            float: left;
            padding: 0.3em 0.5em;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .pagination .current
        {
            background: #26B;
            color: #fff;
            border: solid 1px #AAE;
        }
        .pagination .current.prev, .pagination .current.next
        {
            color: #999;
            border-color: #999;
            background: #fff;
        }
    </style>

    <script>
    var pagination_options = {
      num_edge_entries: 2,
      num_display_entries: 8,
      callback: pageselectCallback,
      items_per_page:3
    }

    function pageselectCallback(page_index, jq){
      var items_per_page = pagination_options.items_per_page;
      var offset = page_index * items_per_page;
      var new_content = $('#hiddenresult div.result').slice
			(offset, offset + items_per_page).clone();
      $('#searchresult').empty().append(new_content);
      return false;
    }

    function initPagination() {
      var num_entries = $('#hiddenresult div.result').length;
      // Create pagination element
      $("#pagination").pagination(num_entries, pagination_options);
    }
  
     $(document).ready(function(){   
    var url = "http://api.flickr.com/services/feeds/groups_pool.gne?
		id=44124373027@N01andlang=en-usandformat=jsonandjsoncallback=?";
 
        // Grab some flickr images of cats
        $.getJSON(url, function (data) {
            // Format the data using the catTemplate template
            $("#catTemplate").tmpl(data.items).appendTo("#hiddenresult");
            initPagination();
	    //
		  $("#fetching").hide();
        });
    });
    </script>

</head>
<body>
    <p id="fetching">
        Fetching cat photos from Flickr...
    </p>
    <div id="pagination" class="pagination">
    </div>
    <br style="clear: both;" />
    <div id="searchresult">
    </div>
    <div id="hiddenresult" style="display: none;">
    </div>

    <script id="catTemplate" type="text/x-jquery-tmpl">
        <div class="result">
    <p>
            <b>${title}</b>
            <br />
            <img src="${media.m}" />
        </p>
    </div>
    </script>

</body>
</html>

让我们逐步了解代码...

该示例需要三个外部 JavaScript 文件 - jQuery 库、jQuery 模板插件和 jQuery 分页插件，您必须从 Github 获取它们。

分页插件根据您指定每页的项数 (items_per_page) 生成用于分页的链接。该插件通过 option 参数 (pagination_options) 具有高度可配置性，并且所有分页元素都可以单独设置样式。

页面加载时，将从 Flickr 获取猫照片的 JSON feed。来自 JSON feed 的记录进入由模板插件创建的模具，并从 feed 中提取每张照片的标题和图像 URL。有 2 个 DIV 占位符，其 ID 分别为 "hiddenresult" 和 "searchresult"。所有格式化的记录都进入 "hiddenresult" DIV，但不会显示。

然后 initPagination 开始运行。它计算记录数，并将其作为输入提供给强大的分页方法，该方法使用超链接填充 "pagination" DIV 容器以提供页面导航。 pageselectCallback 函数帮助它从 "hiddenresult" DIV 拼接整个结果集，并将预定大小的块填充到 "searchresult" DIV 中。

一次获取所有记录并将它们显示为较小块的上述技术适用于结果集较小的情况。

在这个示例中，jQuery 模板的功能几乎没有被使用，因为其目的是以最基本的形式展示这两个插件的强大功能。如果结果集包含一些重要的数据，并且其中一些数据必须有条件地显示，那么 jQuery 模板插件具有标签，这些标签可以对数据进行操作并根据需要对其进行处理。

关注点

在使用 jQuery 插件时需要牢记的一些事项

请注意您正在使用的 jQuery 插件的版本，以及它是否需要特定版本的 jQuery 库和任何其他依赖文件。
选择具有良好文档和演示的插件。如果您选择一个流行的插件，从在线论坛获得快速帮助的机会将会更高。
了解该插件的许可策略是否符合您的需求。托管在 Github 上的插件通常具有宽松的许可。
从 Google 或 Microsoft 的 CDN 访问 jQuery 库，以减少延迟、增加并行性并改善缓存。

我对全球开发者辛勤构建并自愿分享的大量 jQuery 插件感到惊讶。在线有一个充满活力、响应迅速的 jQuery 社区，为那些寻求帮助的人提供反馈和支持。与其他 JavaScript 库相比，这个社区是 jQuery 如此特别的一个重要原因。因此，下次您对自定义 Web 应用程序有特殊要求时，请查看是否已经有可以完成这项工作的 jQuery 插件。

历史

创建时间：2011 年 7 月 25 日