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

 其它分页推荐：http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html

尤其推荐其中的：

jQuery Pagination Plugin

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