https://github.com/alex-xd/jquery-pagination

轻量易用、可自定义化的jquery分页插件^ ^ DEMO→
https://github.com/alex-xd/jquery-pagination

jquery pageindex pager pagination

Last synced: about 2 months ago
JSON representation

轻量易用、可自定义化的jquery分页插件^ ^ DEMO→

• Host: GitHub
• URL: https://github.com/alex-xd/jquery-pagination
• Owner: Alex-xd
• Created: 2016-10-27T09:29:48.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-01T15:00:06.000Z (almost 8 years ago)
• Last Synced: 2024-10-12T13:45:50.477Z (2 months ago)
• Topics: jquery, pageindex, pager, pagination
• Language: JavaScript
• Homepage: https://alex-xd.github.io/jquery-pagination/DEMO.html
• Size: 40 KB
• Stars: 8
• Watchers: 2
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## jquery.pagination.js

[![lisence](https://img.shields.io/badge/LISENCE-MIT-green.svg)](https://github.com/Alex-xd/jquery-pagination)

> A light 、highly customizability and very easy use jquery plugin for pagination ^ ^

![preview](http://o6x2vif88.bkt.clouddn.com/Screen%20Shot%202016-10-29%20at%2001.04.52.png)

压缩后仅为4kb

- 多条件动态分页实例

- 提供多种API接口以供扩展功能

- 自定义回调函数支持

- 可自定义页码显示数量

- 可自定义按钮名称

- 可选的省略号、首页尾页按钮

- 样式完全可自定义化（默认不加载任何样式，干净利落，根据需求添加样式）

- 所有元素类名可自定义

## Usage

**方法一：直接引入**

```html



//这里列出了4个常用的设置，不设置就采用默认配置

var pager = $('#pager').paginate({

        pageIndex: 0, //当前页数

        totlePageCount: 16, //总页数

        maxBtnCount: 7, //按钮数量最多有

        styleURL: './defaultStyles/style1.css' //样式路径 默认无样式

});

```




**方法二：npm安装**

`npm install jquery-pagination` 

## You want More

#### 可选配置和API

|名称|类型|作用|默认值|

|--- |---|---|---|

|pageIndex|Number|当前页码|0|

|totlePageCount|Number|总页码|16|

|maxBtnCount|Number|最大显示按钮数量|7|

|hasDots|Boolean|是否显示省略号|true|

|hasFirstLast|Boolean|是否开启首尾页跳转功能|true|

|styleURL|String|自定义样式路径（默认不加载样式）|空字符串|

|btnClass|String|数字按钮类名|'pager-numbtn'|

|pageTurnClass|String|翻页按钮类名|'pager-turnbtn'|

|firstLastClass|String|首页尾页按钮类名|'pager-flbtn'|

|prevPageName|String|"上一页"标签文字|'prev'|

|nextPageName|String|"下一页"标签文字|'next'|

|firstPageName|String|"首页"标签文字|'First Page'|

|lastPageName|String|"尾页"标签文字|'Last Page'|




## API

先创建实例

```javascript

var pager = $('#pager').paginate();

```

### pager.set(option, value)

更改配置属性

@param {String} option 要设置的配置属性

@param {String}{Number}{Boolean} value 要设置的值

### pager.getPageIndex()

获取当前页

@param  {Number} pageIndex 要跳转到的页码（值为实际页码减一，如：跳到第3页就传入2）

### pager.turnToPage(pageIndex)

跳转页码

@param  {Number} pageIndex 要跳转到的页码（值为实际页码减一，如：跳到第3页就传入2）




## LISENCE

MIT