simplePagination API

simplePagination.js

一个简单的jQuery分页插件，主题和Bootstrap支持CSS 3

分页button样式

"light-theme" 

"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"/>

Step 2: 加入js代码

$(function(){

  $("#paging2").pagination({

          items: 100,

         itemsOnPage: 10,

         cssStyle: 'dark-theme'

     });

});

Step 3: 加入样式

<style type="text/css">

a{text-decoration:none}

.page{margin:30px auto;width:620px}

</style>

Step 4: 加入div

 <!--分页div-->

<div id="paging2" class="page"></div>

属性选项

方法

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);

});

本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5037909.html，如需转载请自行联系原作者