jquery之分頁插件smartpaginator

推薦一個自己業余時間開發的網盤搜索引擎，360盤搜（www.360panso.com）

今天推薦一個分頁工具條插件：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/