20 个分页jQuery 插件和教程

fmms 12年前
     <p>在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。</p>    <h2>1.客户端的jQuery 分页插件<strong>jPages</strong></h2>    <p>jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。</p>    <p><img class="alignnone size-full wp-image-4572" title="Client-side jQuery pagination plugin : jPages" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/e95b5e1a06625ea1970bed48a618d571.jpg" width="500" height="150" /></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335554102702230" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335554912013016" target="_blank">示例</a></p>    <h2>2. jQuery ScrollPagination</h2>    <div id="p_fullcontent" class="detail">     <p><strong>jQuery ScrollPagination plugin</strong> 是一个 jQuery 实现的支持无限滚动加载数据的插件。</p>     <p><a href="/misc/goto?guid=4958335555712313896"><img class="alignnone size-full wp-image-4563" title="jQuery Scroll Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/1b8bd0dc20f9da45d04e6adf1dcf66f9.gif" width="500" height="150" /></a></p>    </div>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335555712313896" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335555712313896" target="_blank">示例</a></p>    <h2>3. jQuery 的分页插件——jqPagination</h2>    <p>jqPagination 是一个简单易用的轻量级 jQuery 分页插件,其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件。此外,它的外观样式是可自定义的,扩展性很强。</p>    <p><img alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/2c3806393cce8021889027867af608c1.jpg" width="450" height="187" /></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958200957277500293" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958200957277500293" target="_blank">示例</a></p>    <h2>4. Extreme Makeover: jPaginator CSS3 Edition</h2>    <p>自从jQuery出现以来,以其简洁、灵活的编程模式风靡于世,而且通过插件的扩展使得多种功能不断被开发出来。jPaginator就是一个简单易用的带滑动条的jQuery分页插件。</p>    <p><img class="lwfimg" title="jPaginator分页插件" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/54c4d819ab3544283379d36db7b41db5.gif" width="450" height="199" /></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335559443576688" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335560241033356" target="_blank">示例</a></p>    <h2>5. Creating Modern jQuery Pagination for Content</h2>    <p><a href="/misc/goto?guid=4958335561046021143"><img class="alignnone size-full wp-image-4570" title="jQuery Pagination For Content" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/a2db9d8157188697229703c430f3b79e.gif" width="500" height="113" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335561046021143" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335562584434404" target="_blank">示例</a></p>    <h2>6. Sausage : jQuery infinite Pagination with 示例</h2>    <p>Sausage 是一款 jQuery 内容分页插件,用于补充页面内容很长情况下产生的滚动不友好问题。</p>    <p><a href="/misc/goto?guid=4958201081140267747"><img class="alignnone size-full wp-image-4568" title="Sausage : jQuery infinite Pagination plugin with 示例" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/d1cedd520e8b17887dec29a3893d3b54.gif" width="500" height="170" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958201081140267747" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335564844370745" target="_blank">示例</a></p>    <h2>7. Pagination with Jquery, PHP , Ajax and MySQL</h2>    <p><a href="/misc/goto?guid=4958183845163090634"><img class="alignnone size-full wp-image-4569" title="Pagination with Jquery, PHP , Ajax and MySQL" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/697e0fb2d29b4e3eb9d5d0f90a344ab5.gif" width="500" height="104" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958183845163090634" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335567105456574" target="_blank">示例</a></p>    <h2>8. Smart Paginator : jQuery Pagination Plugin</h2>    <p><a href="/misc/goto?guid=4958335567907119982"><img class="alignnone size-full wp-image-4578" title="Smart Paginator : jQuery Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/d624aa67c1b53bccfa83b7639eef92fa.gif" width="500" height="150" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335567907119982" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335569442522021" target="_blank">示例</a></p>    <h2>9. How to create easy pagination with jQuery</h2>    <p><a href="/misc/goto?guid=4958335570240017611"><img class="alignnone size-full wp-image-4567" title="jQuery easy pagination with 示例" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/a5b989ed1e0f66218639eed2e3bbc565.gif" width="500" height="68" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335570240017611" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335571853945355" target="_blank">示例</a></p>    <h2>10. Pagination with jQuery, MySQL and PHP</h2>    <p><a href="/misc/goto?guid=4958335572672914609"><img class="alignnone size-full wp-image-4565" title="Pagination with jQuery, MySQL and PHP" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/e53d05c51681158aef3c709ad5aa3154.gif" width="500" height="122" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335572672914609" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335574218094755" target="_blank">示例</a></p>    <h2>11. Xarg : Ajax jQuery Pagination</h2>    <p><a href="/misc/goto?guid=4958202354078849593"><img class="alignnone size-full wp-image-4566" title="Xarg : Ajax jQuery Pagination" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/b463a5c5633f61e2c526b650622af06f.jpg" width="500" height="200" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958202354078849593" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958202354078849593" target="_blank">示例</a></p>    <h2>12. Pajinate – A jQuery Pagination Plugin</h2>    <p><a href="/misc/goto?guid=4958335577226763087"><img class="alignnone size-full wp-image-4577" title="Pajinate – A jQuery Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/19d3b71eaa40becf61f1ac0de4dd696d.gif" width="500" height="162" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335577226763087" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335578758385238" target="_blank">示例</a></p>    <h2>13. jPaginate: A Fancy jQuery Pagination Plugin</h2>    <p>jPaginate是一个比较奇特的jQuery分页插件。当用户点击页码或鼠标移到箭头时,页码会向前或向后滚动。</p>    <p><a href="/misc/goto?guid=4958335579558596267"><img class="alignnone size-full wp-image-4573" title="jPaginate: A Fancy jQuery Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/8385bf71b404d2b8de7226a26d35f536.gif" width="500" height="150" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335579558596267" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335581092911200" target="_blank">示例</a></p>    <h2>14. SimplePager – jQuery paging plugin</h2>    <p><a href="/misc/goto?guid=4958335581888063125"><img class="alignnone size-full wp-image-4561" title="SimplePager - jQuery paging plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/9b67d6aa823c067dcaf5b070fce65033.gif" width="500" height="137" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335581888063125" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335583407260660" target="_blank">示例</a></p>    <h2>15. jPaginator: jQuery Pagination Plugin</h2>    <p><a href="/misc/goto?guid=4958335584204545580"><img class="alignnone size-full wp-image-4575" title="jPaginator: jQuery Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/f6d235b94a6d8f883c9ea678c12c325a.gif" width="500" height="138" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335584204545580" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335584204545580" target="_blank">示例</a></p>    <h2>16. jQuery Pagination Plugin</h2>    <p><a href="/misc/goto?guid=4958335586468717677"><img class="alignnone size-full wp-image-4571" title="jQuery Pagination Plugin" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/f8dd8f99f92e03510769a7af48788e95.gif" width="500" height="150" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335586468717677" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335588025849598" target="_blank">示例</a></p>    <h2>17. Sweet Pages: A jQuery Pagination Solution</h2>    <p><a href="/misc/goto?guid=4958335588823462626"><img class="alignnone size-full wp-image-4579" title="Sweet Pages: A jQuery Pagination Solution" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/972c0a22ea539c0e92d6e09364bde835.jpg" width="500" height="150" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335588823462626" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335590350149725" target="_blank">示例</a></p>    <h2>18. Easy pagination with jQuery and Ajax</h2>    <p><a href="/misc/goto?guid=4958335591140593673"><img class="alignnone size-full wp-image-4564" title="Easy pagination with jQuery and Ajax" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/d7f314c62e345c50249ec964637722e1.gif" width="500" height="138" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335591140593673" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335592676625054" target="_blank">示例</a></p>    <h2>19. AJAX Pagination using jQuery and PHP with Animation</h2>    <p><a href="/misc/goto?guid=4958335593475844467"><img class="alignnone size-full wp-image-4562" title="AJAX Pagination using jQuery and PHP with Animation" alt="20 个分页jQuery 插件和教程" src="https://simg.open-open.com/show/23c32ca3a3001024e6bc6f3fa2537a5f.jpg" width="500" height="150" /></a></p>    <p><a class="readlink" title="查看 Link" href="/misc/goto?guid=4958335593475844467" target="_blank">查看</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958335594989772993" target="_blank">示例</a></p>