Pagination.js <a href="https://github.com/superRaytin/paginationjs#normal"></a>Normal<a href="https://github.com/superRaytin/paginationjs#only-page-numbers"></a>Only page 介绍
Pagination.js 是一个简单、可定制的分页组件。
paginationjs.com
Usage
Normal
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Only page
numbers
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
pageSize: 5,
showPrevious: false,
showNext: false,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Show
“go” input & button
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],
pageSize: 5,
showGoInput: true,
showGoButton: true,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
[](https://github.com/superRaytin/paginationjs#auto-hide-previous--next-
button)Auto hide previous & next button
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
pageSize: 5,
autoHidePrevious: true,
autoHideNext: true,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Mini
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
pageSize: 5,
showPageNumbers: false,
showNavigator: true,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
[](https://github.com/superRaytin/paginationjs#asynchronous-or-
jsonp)Asynchronous or JSONP
$('#demo').pagination({
dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
locator: 'items',
totalNumber: 120,
pageSize: 20,
ajax: {
beforeSend: function(){
dataContainer.html('Loading data from flickr.com ...');
}
},
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Specify
default
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
pageSize: 5,
pageNumber: 3,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Format
result data
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
pageSize: 8,
formatResult: function(data){
var result = [];
for(var i = 0, len = data.length; i < len; i++){
result.push(data[i] + ' - good guys');
}
return result;
},
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
[](https://github.com/superRaytin/paginationjs#another-format-result-
data)Another format result data
$('#demo').pagination({
dataSource: [{a :1}, {a :2}, {a :3}, {a :4}, ... , {a :50}],
pageSize: 8,
formatResult: function(data){
for(var i = 0, len = data.length; i < len; i++){
data[i].a = data[i].a + ' - bad guys';
}
},
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Format
navigator
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 15],
pageSize: 5,
showNavigator: true,
formatNavigator: '<span style="color: #f00"><%= currentPage %></span> st/rd/th, <%= totalPage %> pages, <%= totalNumber %> entries',
position: 'top',
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Format “go”
input
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 25],
pageSize: 5,
showGoInput: true,
showGoButton: true,
formatGoInput: 'go to <%= input %> st/rd/th',
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})