使用jQuery实现分页控件pagination.js 1.0

172 浏览量更新于2024-08-30 收藏 52KB PDF 举报

"这篇文章主要介绍了如何使用jQuery来创建一个简单的分页控件，该控件名为pagination.js 1.0，适用于那些希望在网页中实现分页功能的开发者。控件设计灵活，允许用户自定义一些关键参数，如每页显示的条目数量、页码显示范围以及点击页码时的回调函数。" jQuery分页控件是一种常见的网页元素，它帮助用户在大量数据中进行导航，通常用于博客、论坛和电子商务网站等。在这个基于jQuery的分页控件中，主要关注以下几个核心概念和功能： 1. **初始化与配置**：通过`$.fn.pagination`方法对元素进行分页插件的初始化，接受一个`options`对象作为参数，包含如总数（`count`）、每页大小（`size`）、当前页（`index`）等配置。 2. **默认参数**：控件设定了默认值，如总条数`count`为0，每页显示条数`size`为10，初始页`index`为1，以及在当前页左右显示的页码数`lrCount`为5等。开发者可以根据实际需求覆盖这些默认值。 3. **回调函数**：`callback`是当用户点击页码时触发的函数，接收整个`options`对象作为参数。这使得开发者可以自定义点击页码后的行为，例如发起AJAX请求更新内容。`index`属性表示被点击的页码。 4. **beforeRender**：在每个页码元素呈现前调用的函数，接收页码的jQuery对象。这个回调提供了一个机会在显示之前对页码元素进行额外的处理，例如添加自定义属性或样式。 5. **导航元素**：控件还支持“首页”、“尾页”、“上一页”和“下一页”的文字设定，便于用户快速跳转到页面的开始或结束，以及前后翻页。 6. **动态调整**：如果数据总数`count`在运行时发生变化，可以通过重新设置总数并调用回调函数来更新分页控件。只需在`callback`中修改`options.count`，然后返回即可。 7. **显示逻辑**：根据设置的`lrCount`，`lCount`和`rCount`，分页控件会智能决定显示哪些页码，例如在当前页的左右各显示5个页码，并可能插入省略号（`ellipsis`）表示还有更多页码。 8. **代码结构**：示例中的代码采用立即执行函数表达式（IIFE）封装，以避免全局变量污染，同时使用了jQuery的`$.extend`方法来合并默认选项和用户提供的选项。这个jQuery分页控件提供了基础的分页功能，同时允许开发者通过回调函数和`beforeRender`进行定制，适应不同场景的需求。对于希望快速实现分页功能的开发者来说，这是一个简单而实用的解决方案。

基于基于jquery实现简单的分页控件实现简单的分页控件

主要为大家详细介绍了基于jquery实现简单的分页控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前台分页控件有很多，这里分享我的分页控件 pagination.js 1.0版本，该控件基于jquery。

先来看一下预览效果：

默认情况下，点击页码会像博客园一样，在url后面加上"#p页码"。

控件有2个参数需要注意：

1. beforeRender: 在每个页码项呈现前会被调用，参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理，例如增

加自己的属性等。默认情况下，点击页码，会在url后面加上“#p页码”，这样的url并不会刷新页面。如果我们需要刷新页面，例

如url为，"default.aspx?index=页码"，就可以在这个回调函数里处理。

2. callback: 点击页码触发，参数为整个options。点击页码并不会发起ajax请求，需要自己处理，options.index 就是本次点击

的页码。有时候我们的总数可能会变化，callback 可以将 options 参数回传，这里只要重新设置总数，然后 return 即可。

具体看调用例子就明白了。

源代码：

/*分页控件v1.0

date:2015.08.26

(function(window,$){

$.fn.pagination = function(options){

var _dftOpts = {

count:0,//总数

size:10,//每页数量

index:1,//当前页

lrCount:5,//当前页左右最多显示的数量

lCount:0,//最开始预留的数量

rCount:0,//最后预留的数量

first:"首页",

last:"尾页",

before:"上一页",

next:"下一页",

callback:null,//点击事件

beforeRender:null//项呈现前

};

$.extend(_dftOpts,options);

var count = _dftOpts.count;

if(count <= 0) return;

var _ellipsis = "...";

var _size = _dftOpts.size > 0 ? (_dftOpts.size > count ? count : _dftOpts.size) : 1;

var _page = Math.ceil(count / _size);

var _index = _dftOpts.index > 0 ? (_dftOpts.index > _page ? _page : _dftOpts.index) : 1;

var _lrcount = _dftOpts.lrCount * 2 + 1 > _page ? parseInt((_page - 1) / 2) : _dftOpts.lrCount;

var _continueCount = _lrcount * 2 + 1;

var _lCount = _dftOpts.lCount <= 0 ? 0 : (_dftOpts.lCount > _page ? _page - 1 : _dftOpts.lCount);

var _rCount = _dftOpts.rCount <= 0 ? 0 : (_dftOpts.rCount > _page ? _page - 1 : _dftOpts.rCount);

var _first = _dftOpts.first;

var _before = _dftOpts.before;

var _last = _dftOpts.last;

var _next = _dftOpts.next;

var _FromTo;

var _url = location.pathname + location.search + "#p";

var jthis = this;

var jPager = $("<div>",{"class":"pager"});

initJPager();

jthis.append(jPager);

regisiterEvent();

return jthis;

/*function*/

function initJPager(){

_FromTo = GetFromTo();

var from = _FromTo.from;

var to = _FromTo.to;

var before = _index <= 1 ? 1 : _index - 1;

var next = _index >= _page ? _page : _index + 1;

var beforeLast = _page - 1;

var jPrevs,jNexts;

var i;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38557095

粉丝: 2
资源: 930

使用jQuery实现分页控件pagination.js 1.0

基于jquery的js+ajax分页控件

jquery.page分页控件02.zip

基于jquery的分页控件（客户端控件）

ajax+jquery实现分页功能

如何通过JQuery与后端交互实现分页

如何使用jQuery实现一个带有自动完成功能的搜索框，并结合CSS和JavaScript实现分页效果？请提供相关代码示例。

jquery.datatable获取分页

JQUERY写一个分页

如何使用JavaScript和jQuery实现一个带分页功能的表格数据显示？请结合实际代码示例进行说明。

如何通过bootstrap-table实现后端分页，并优化数据加载和分页性能？

最新资源