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
大半夜的,先说些废话提提神 如今智能家居已经不再停留在概念阶段,高大上的科技公司都已经推出了自己的部分或全套的智能家居解决方案,不过就目前的现状而言,大多还停留在展厅阶段,还没有广泛的推广起来,有人说 ...
随机推荐
- 【Demo 0009】表视图控制器
本章学习要点: 1. 掌握表视图控制器结构; 2. 掌握表视图控制器的基本使用; 3. 掌握表视图表格的基本使用: 4. 掌握自定义表视图表格及 ...
- Android 特殊符号的转码大全
项目中要在string.xml 中显示特殊符号,如@号冒号等,直接写肯定不行啦..只能考虑使用ASCII码进行显示: @号 @ :号 : 空格 以下为常见的ASCII十进制交换编码: --> ...
- AS3开发必须掌握的内容
1.事件机制 2.显示列表 3.垃圾回收 4.常用方法 5.网络通信 6.位图动画 7.渲染机制 8.API结构 9.沙箱机制 10.资源管理 11.内存管理 12.性能优化 13.资源选择 14.安 ...
- hdu 4715 Difference Between Primes (打表 枚举)
Difference Between Primes Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- Cocos2d-x 创建(create)动画对象CCAnimation报错分析
本人在使用精灵表单创建动画的过程中突然遇到了一些个问题,下面进行一下分析总结. 根据在Cocos2d-iphone中的经验,我写出了如下的代码: CCSpriteFrameCache::sharedS ...
- 用qsort排序
冒泡,快排都是常见的排序方法,这里介绍用头文件里的qsort函数排序.只是自己要先一个cmp函数. #include<stdlib.h>//qsort的头文件 int a[100]= ...
- 灵动标签的使用方法 ecms通过运行sql获取须要的记录
在某些条件下,我们要求站点的某页上显示指定的信息, 可是这样的指定假设固定去用代码写死的话,对以后的修改将会是大麻烦: 这时候sql语句的优势就凸显出来,利用sql语句仅仅须要改改数字,就能让显示的内 ...
- DataReader和DataSet的区别以及使用
DataReader和DataSet这两个对象都可以将检索的关系数据存储在内存中.它们在功能使用方面非常相似,但是它们不可以相互替换. 主要区别如表所示: DataReader DataSet 数 ...
- codeforces584B Kolya and Tanya
题目链接:http://codeforces.com/problemset/problem/584/B 解题思路:当n=1时,_______ _______ ______ 三个数每位上可以 ...
- opencv 边缘羽化,边缘过渡
原地址:http://blog.csdn.net/sogarme/article/details/12942971 当把前景和背景分开时,黑色代表背景,白色代表前景,如下图1—记作img1 为了平滑过 ...