jquery分页插件
这篇热门文章已于2017年2月更新，以反映jQuery分页插件的当前状态。
呈现冗长而笨拙的结果列表通常是显示信息的一种糟糕方法。 这就是为什么分页（尤其是内容较长的分页）对于正确设置很重要。
服务器端分页通常用于获取分页的内容，显示一组分为页面的结果（通常具有唯一的URL）。 尽管这很好，但客户端分页是另一种解决方案。 让我们来看看一些基于jQuery的插件，您可以利用它们来创建分页结果。
TWBS jQuery分页
该插件有助于为您的网站创建简单，有效和有用的分页。 您所需要做的就是指定一个元素（最好是ul或div ），然后插件将负责其余的工作。 TWBS需要jQuery，插件本身，以及可选的Bootstrap CSS。
在已经准备好数据并且仅使用分页器在视图中切换内容的情况下，这可能会很有用。 您可以挂钩到onPageClick事件并确定要加载的页面（或选择运行Ajax调用以从数据库中提取结果）。 无论哪种方式，此插件都很简单，易于使用，并提供了多种配置选项来满足您的需求。
该插件看起来很稳定， 并且已在多个修订版 （现在为1.4.1版）中进行了维护和更新 。 这是一个很好的库，看起来将来会对其进行维护和扩展。
jQuery BootPag
jQuery Bootpag使您可以创建简单的分页控件，而不必大惊小怪。 该插件具有多个选项，例如控制下一个/上一个标签的能力以及应用于控制器的各种类（例如在第一，最后和后续页面元素上）
要启动并运行，您将需要jQuery，Bootstrap JS和此插件的JS文件。 除非您打算自己设置样式，否则您可能还需要Bootstrap CSS文件。 将这些设置到位后，您就可以收听在page之间导航时触发的page事件。
事件处理请求的页面和事件本身。 您可以在这里获取内容或更改DOM。 另一个有用的元素是可以设置的href属性。 设置此属性可使您将锚链接添加到页面的URL（例如href: "#result-page-{{number}}" ），从而将插件的内部页码添加到URL。 您可以随意命名，但这对于创建数据集和维护状态很有用。
您可能会发现这很有用，而不是默认情况下不加载第一页，而是可以检查URL是否包含特定页面，然后将Bootpag初始化为该页面。 例如，如果有人直接导航到结果，则在结果的第7页中加载。
该插件自2015年中以来未进行更新，当前版本为1.0.7。 但是，它可以按预期运行，并提供了足够的选项供您根据需要自定义。
jQuery数据表
jQuery Datatable（不要与几乎相同名称的DataTables插件相混淆）与我们已经看过的其他东西有些不同。 该插件为您的数据集创建一个分页表。 您不仅可以浏览分页数据，还可以选择对字段进行过滤和排序。
要启动并运行，您需要将datatable和datatable.jquery JS文件都添加到您的项目中（当前似乎没有这些文件的实时CDN）。 这两个以及jQuery都是必需的，以帮助您入门和运行。
您还需要使用Bootstrap进行样式设置或自行设置样式。 一个不错的起点是我们的CodePen，您可以从那里分叉并开始。
Datatable随附了一系列选项，您可以根据需要调整这些选项。 这些文档概述了仅通过调整设置即可完成的工作。
Datatable的亮点在于其强大的高级配置，例如调整哪些列是可过滤的（以及它们的过滤方式）。 您可以使用filters选项来确定哪些列可以过滤以及如何过滤（文本输入，选择元素，正则表达式模式等）。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
插件提取的数据直接来自表。 但是，您可以指定值/对象的数组来填充表。 如果您要动态填充列表，这样就不会从DOM中收集其值，那么这将很有帮助。 还可以设置表的Ajax部分，使其指向特定的端点，并将连续获取新的信息（以确保表保持一致状态是完美的）。
onChange事件也很有用，可以让您知道要移动到的页面以及您来自何处。 该插件处理表中数据的更新，但是您可以使用它来运行其他功能或执行一些逻辑。
总体而言，Datatable提供了一组相当强大的选项，可帮助您显示，排序和分页数据集。 插件存储库看起来要定期更新（当前版本为v2.0）。 提交的数量很多，从外观上看，每个版本都有改进。
jPages插件
jPages是一种不同样式的分页控制插件。
jPages还支持Animate.css和Lazy Load 。 由于它是一个较旧的插件，因此您需要测试每个插件的最新版本，以查看它们是否仍然有效。 为了节省您的时间，“ 马赛克演示”页面内部链接到此版本的Animate.css ，“ 延迟加载”演示页面链接到此版本的lazyload.js。
考虑到它是一个较旧的插件，jPages的文档相当不错。 该文档概述了您可以调整的各种属性以及要挂接到的事件。 您可以调整设置，例如通过滚动控制分页和调整按钮的文本组件等。
要启动并运行一个基本示例，请首先包含jPages JS文件，然后创建一个基本HTML结构，并在顶部的导航栏和随后的第二个容器中存储数据。 该插件查找holder元素，然后查找相邻的兄弟容器。
<div class="holder"></div>
<ul id="itemContainer">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul> 现在，您需要调用jPages函数进行设置，并为分页控件及其关联的数据容器添加选择器。
//find the `.holder' class and the 'itemContainer' element with our data
$("div.holder").jPages({
containerID : "itemContainer"
});作为较旧的插件，它在GitHub上不可用。 该插件的网站展示了几个示例，并概述了您可以连接到的所有属性/事件。 如果您正在寻找最新的插件，那么很可能不是。 这个插件擅长的地方是创建可定制的分页块。 使用此插件，您可以创建表，画廊甚至基本的滑块。
jQuery Pajinate
jQuery Pajinate是一个较老但功能强大的分页插件，您可以利用它来创建自己的网站。 它的唯一目的是在单个容器中获取一长串元素，并将其分布在多个“页面”中。 它与我们的某些其他插件不同，因为它直接在内容上进行排序/分页，而无需您进行任何调整。 这可能是有益的，但也意味着如果您的需求不符合要求，则需要对其进行更多自定义。
注意 ：作为较老的库，有一些注意事项：
- 该演示可能会引发不安全的脚本错误。 这是因为演示页面正在通过HTTP而不是HTTPS请求资源。 加载脚本后，它就可以正常工作（请注意警告）。
- 您需要坚持使用jQuery 1xx或2xx，因为jQuery的3xx分支已删除了库所依赖的功能。 前两个都可以正常工作。
您需要从其GitHub页面下载jQuery Pajinate脚本，并将其包含在您的项目中（以及jQuery）。 一旦拥有了这两个元素，就可以通过调用pajinate()方法来设置分页器。
默认情况下，插件将查找某些元素以进行初始化。 Pajinate将尝试查找一个元素，在该元素后将添加其导航元素，默认情况下会查找page_navigation元素。 它还期望在其中找到另一个包含content元素，默认情况下会查找content元素。 可以在调用pajinate时将其更改并设置为属性。
这是标记应如何显示的基本示例
<div id="page_container">
<div class="page_navigation"></div>
<ul class="content">
<li> <p>One</p> </li>
<li> <p>Two</p> </li>
<li> <p>Three</p> </li>
<li> <p>Four</p> </li>
<li> <p>Five</p> </li>
<li> <p>Six</p> </li>
<li> <p>Seven</p> </li>
<li> <p>Eight</p> </li>
</ul>
</div>以及相应的JS
$('#page_container9').pajinate({
num_page_links_to_display : 3,
items_per_page : 6,
wrap_around: true,
show_first_last: false
});您还可以设置其他有用的属性，例如要显示的项目数和控件的标签。 GitHub页面底部的文档概述了您可以调整的属性。
总体而言，这是一个较旧的插件，自2013年以来一直未更新。 它在旧版本的jQuery上运行良好，因此，该位置应该用于旧版网站构建（您知道该版本将停留在旧版jQuery上，但您仍然需要添加某些功能）。
本文由Dominic Myers进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！
jquery分页插件
3238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
