jquery之分頁外掛程式smartpaginator

標籤：style   blog   http   io   ar   color   os   使用   sp   

今天推薦一個分頁工具條外掛程式：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/

jquery之分頁外掛程式smartpaginator