jquery之分页插件smartpaginator

今天推荐一个分页工具条插件：Smart Paginator，这个插件用途还是很广的，而且可定制性相当不错，目前内置三种颜色，有需要的话，可以自己改css定制颜色

1.如何使用Smart Paginator？

1.1引入以下几个文件

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="smartpaginator.js" type="text/javascript"></script>

    <link href="smartpaginator.css" rel="stylesheet" type="text/css" />

1.2添加一个分页容器层

<div id="smart-paginator" > </div>

1.3初始化插件

$(document).ready(function() {

$('#smart-paginator').smartpaginator({

                                totalrecords: total,

                                recordsperpage: items_per_page,

                                next: '下一页',

                                prev: '上一页',

                                first: '首页',

                                last: '末页',

                                go: '前往',

                                theme: 'docloud-pagi',

                                initval: current_page,

                                onchange: onPageChange

                            });

});

 function onPageChange(newPageValue) {

            current_page = newPageValue;

            //根据新的页码做一些改变，比如说页面更新操作

            getImageList(newPageValue);

        }

可以看到想要初始化Smart Paginator，需要配置不少参数，接下来来看下这些主要参数的含义。

2.参数说明

参数	默认值	类型	描述
totalrecords	0	Number	总的分页数
recordsperpage	0	Number	单页数据量
length	10	Number	这个参数很特殊，上一页、下一页、第一页、最后一页的显示控制依赖于这个参数，当length的值大于totalrecords/recordsperpage时，是不显示上一页、下一页、第一页、最后一页的
next	Next	String	下一页文本
prev	Prev	String	上一页文本
first	First	String	第一页文本
last	Last	String	最后一页文本
go	Go	String	跳转文本
theme	green	Stirng	模板
display	double	String
initval	1	Number	默认显示第几页
datacontainer	”	String	数据容器id，请看demo3
dataelement	”	String	数据元素，指的是容器下的对应的子元素的选择器，请看demo2
onchange	null	Function	分页改变后触发的函数

3.自定义颜色模板

.docloud-pagi

 {

     background-color: #F0F5FF;

 }

.docloud-pagi.normal

 {

     background-color: #588500;

     color: White;

     border: solid 1px #5f9000;

 }

 .docloud-pagi.active

 {

     background-color: #344C00;

     color: #F8EB00;

     border: solid 1px #5f9000;

 }

 .docloud-pagi .btn

 {

     background-color: #588500;

     color: White;

     border: solid 1px #5f9000;

 }

尤其推荐其中的：

jQuery Pagination Plugin

http://tutorials.ajaxmasters.com/pagination-demo/

巴特西

jquery之分页插件smartpaginator

1.如何使用Smart Paginator？

1.1引入以下几个文件

1.2添加一个分页容器层

1.3初始化插件

2.参数说明

3.自定义颜色模板

jQuery Pagination Plugin

最新文章

热门文章