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

转载请注明：jquery分页插件Smart Paginator - 前端开发