simplePagination API
simplePagination API
simplePagination.js
一个简单的jQuery分页插件,主题和Bootstrap支持CSS 3
分页button样式
"light-theme"
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29pbG92ZTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
"dark-theme"
"compact-theme"
下载地址
http://www.arungudelli.com/jquery/simple-pagination-using-jquery/
使用
Step 1: 加入js和css
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="plug/simplePagination/tests/lib/jquery.min.js"></script>
<script type="text/javascript" src="plug/simplePagination/jquery.simplePagination.js"></script>
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="plug/simplePagination/simplePagination.css"/>
: 加入js代码
$(function(){
$("#paging2").pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'dark-theme'
});
});
: 加入样式
<style type="text/css">
a{text-decoration:none}
.page{margin:30px auto;width:620px}
</style>
: 加入div
<!--分页div-->
<div id="paging2" class="page"></div>
属性选项
属性 |
类型 |
默认值 |
备注 |
items |
Integer |
Default: 1 |
总条数 |
itemsOnPage |
Integer |
Default: 1 |
每页显示条数 |
pages |
Integer |
Optional |
强制设置分页的固定页数,这将使items和itemsOnPage属性失效。 |
displayedPages |
Integer |
Default: 5 |
開始隐藏页码的页数。默认5,最小为3 |
edges |
Integer |
Default: 2 |
How many page numbers are visible at the beginning/ending of the pagination. |
currentPage |
Integer |
Default: 1 |
当前页 |
hrefTextPrefix |
String |
Default: "#page-" |
悬停在页码时显示地址的页码前缀。http://xxxxx/test.html#前缀-1 |
hrefTextSuffix |
String |
Default: empty string |
悬停在页码时显示地址的页码后缀。 http://xxxxx/test.html#page-1-后缀 |
prevText |
String |
Default: "Prev" |
上一页button显示文本 |
nextText |
String |
Default: "Next" |
下一页button显示文本 |
labelMap |
Array |
Default: empty array |
A collection of labels that will be used to render the pagination items, replacing the numbers. |
cssStyle |
String |
Default: "light-theme" |
分页button样式 |
selectOnClick |
Boolean |
Default: true |
Set to false if you don't want to select the page immediately after click. |
onPageClick(pageNumber, event) |
Function |
Optional |
页码点击事件调用函数,可选參数 |
onInit |
Function |
Optional |
Function to call when the pagination is initialized. |
方法
selectPage - 指定一个分页的页码
$(function() {
$("#paging2").pagination('selectPage', 3);
});
prevPage - Selects the previous page.
$(function() {
$("#paging2").pagination('prevPage');
});
nextPage - Select the next page.
$(function() {
$("#paging2").pagination('nextPage');
});
getPagesCount - 返回总页数
$(function() {
$("#paging2").pagination('getPagesCount');
});
getCurrentPage - 返回当前的页面.
$(function() {
$(selector).pagination('getCurrentPage');
});
disable - 禁用分页功能.
$(function() {
$("#paging2").pagination('disable');
});
enable - 解禁分页功能.
$(function() {
$("#paging2").pagination('enable');
});
destroy - 将分页破坏掉
$(function() {
$("#paging2").pagination('destroy');
});
redraw - 将分页破坏状态恢复
$(function() {
$("#paging2").pagination('redraw');
});
updateItems - 同意动态的改动总条数
$(function() {
$("#paging2").pagination('updateItems', 100);
});
updateItemsOnPage - 动态的改动总条数后恢复指定总条数
$(function() {
$("#paging2").pagination('updateItemsOnPage',100);
});
drawPage - 当数据页面被分配给指定的页
$(function() {
$("#paging2").pagination('drawPage', 2);
});
simplePagination API的更多相关文章
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- 干货来袭-整套完整安全的API接口解决方案
在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...
- 12306官方火车票Api接口
2017,现在已进入春运期间,真的是一票难求,深有体会.各种购票抢票软件应运而生,也有购买加速包提高抢票几率,可以理解为变相的黄牛.对于技术人员,虽然写一个抢票软件还是比较难的,但是还是简单看看123 ...
- 几个有趣的WEB设备API(二)
浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口 浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (or ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- JavaScript 对数据处理的5个API
JavaScript对数据处理包括向上取整.向下取整.四舍五入.固定精度和固定长度5种方式,分别对应ceil,floor,round,toFixed,toPrecision等5个API,本文将对这5个 ...
- ES5对Array增强的9个API
为了更方便的对Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf ...
- javascript的api设计原则
前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到 ...
- 一百元的智能家居——Asp.Net Mvc Api+讯飞语音+Android+Arduino
大半夜的,先说些废话提提神 如今智能家居已经不再停留在概念阶段,高大上的科技公司都已经推出了自己的部分或全套的智能家居解决方案,不过就目前的现状而言,大多还停留在展厅阶段,还没有广泛的推广起来,有人说 ...
随机推荐
- c 有意思的数组初始化
c 有意思的数组初始化 #include <stdio.h> int main() { int i = 0; char a[1024]; char a0[10] = {}; char a1 ...
- 【Demo 0004】屏幕、窗体及视图基础知识
本章学习要点 1. 了解iOS中应用程序(UIApplication)与屏幕.窗体以及视图相关基础知识: 2. 掌握应用程序常用的属性与方法: 3. 掌握窗 ...
- Java魔法堂:JVM的运行模式 (转)
一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...
- ubuntu14.04中virtualbox虚拟机无法启动
近期升级了ubuntu14.04,还是按之前的方法安装了virtualbox(guest系统仍然使用升级之前的镜像文件),可是在启动guest系统时,总是报错,提演示样例如以下: Kernel dri ...
- poj3461 Oulipo (KMP模板题~) 前面哪些也是模板题 O.O
# include <stdio.h> # include <algorithm> # include <string.h> using namespace std ...
- 在Android中改动快捷方式的图标
1)打开"res/drawable"-->复制一张icon2.jpg图片到该drawable目录,同一时候,也将复制icon2.jpg图片到bin/res/drawable. ...
- python+ueditor+七牛云存储整合
开发环境:python pyramid. 參考网址:http://developer.qiniu.com/docs/v6/sdk/python-sdk.html,http://my.oschina.n ...
- storm-编程入门
一 编程接口 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbm ...
- Spring3.0官网文档学习笔记(七)--3.4.2
3.4.2 依赖与配置的细节 3.4.2.1 Straight values (primitives, Strings, and so on) JavaBeans PropertyE ...
- HDU4344(大数分解)
题目:Mark the Rope 题意就是给一个数,然后求这个数的所有因子中组成的最大的一个子集,其中1和本身除外,使得在这个子集中元素两两互素,求最大子集的元素个 数,并且求出和最大的值. 找规律就 ...