jquery分页插件—Smart Paginator

 

今天推荐一个分页工具条插件：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: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange
 
});
 
         function onChange(newPageValue) {
             alert(newPageValue);
         }

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

2.参数说明

3.自定义颜色模板

.green
{
    background-color: #4f7305;
}
.green.normal
{
    background-color: #588500;
    color: White;
    border: solid 1px #5f9000;
}
.green.active
{
    background-color: #344C00;
    color: #F8EB00;
    border: solid 1px #5f9000;
}
.green .btn
{
    background-color: #588500;
    color: White;
    border: solid 1px #5f9000;
}