Loading...

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/

posted @ 2014-11-20 10:35  微笑阳光哈*_*  阅读(255)  评论(0编辑  收藏  举报