jquery之分页插件smartpaginator

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

1.如何使用Smart Paginator？

1.1引入以下几个文件

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.4.4.min.js" type="text/javascript"></script>     <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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.参数说明

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