Giter Club home page Giter Club logo

jquery-pagination's Introduction

jquery.pagination.js

lisence

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

preview

压缩后仅为4kb

  • 多条件动态分页实例
  • 提供多种API接口以供扩展功能
  • 自定义回调函数支持
  • 可自定义页码显示数量
  • 可自定义按钮名称
  • 可选的省略号、首页尾页按钮
  • 样式完全可自定义化(默认不加载任何样式,干净利落,根据需求添加样式)
  • 所有元素类名可自定义

Usage

方法一:直接引入

<script src="jquery.min.js"></script>
<script src="jquery.pagination.min.js"></script>

<div id="pager"></div>

<script>
//这里列出了4个常用的设置,不设置就采用默认配置
var pager = $('#pager').paginate({
        pageIndex: 0, //当前页数
        totlePageCount: 16, //总页数
        maxBtnCount: 7, //按钮数量最多有
        styleURL: './defaultStyles/style1.css' //样式路径 默认无样式
});
</script>

**方法二: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 先创建实例
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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.