You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
5.3 KiB
216 lines
5.3 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Pagination component |
|
* |
|
* Specific JS code additions for components_pagination.html page |
|
* |
|
* Version: 1.0 |
|
* Latest update: Aug 1, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function() { |
|
|
|
|
|
// Bootpag dynamic pagination |
|
// ------------------------------ |
|
|
|
// Basic |
|
$('.bootpag-default').bootpag({ |
|
total: 20, |
|
maxVisible: 6, |
|
leaps: false |
|
}).on("page", function(event, num){ |
|
$(".content-default").html("Page " + num); // or some ajax content loading... |
|
}).children('.pagination').addClass('pagination-sm'); |
|
|
|
|
|
// Flat style |
|
$('.bootpag-flat').bootpag({ |
|
total: 20, |
|
maxVisible: 6, |
|
leaps: false |
|
}).on("page", function(event, num){ |
|
$(".content-flat").html("Page " + num); // or some ajax content loading... |
|
}).children('.pagination').addClass('pagination-flat pagination-sm'); |
|
|
|
|
|
// Separated style |
|
$('.bootpag-separated').bootpag({ |
|
total: 20, |
|
maxVisible: 6, |
|
leaps: false |
|
}).on("page", function(event, num){ |
|
$(".content-separated").html("Page " + num); // or some ajax content loading... |
|
}).children('.pagination').addClass('pagination-separated pagination-sm'); |
|
|
|
|
|
// Custom button text |
|
$('.bootpag-prev-next').bootpag({ |
|
total: 10, |
|
maxVisible: 5, |
|
leaps: false, |
|
prev: 'prev', |
|
next: 'next' |
|
}).on("page", function(event, num){ |
|
$(".content-prev-next").html("Page " + num); // or some ajax content loading... |
|
}).children('.pagination').addClass('pagination-flat pagination-sm'); |
|
|
|
|
|
// Custom start page |
|
$('.bootpag-page-start').bootpag({ |
|
total: 10, |
|
maxVisible: 6, |
|
page: 3, |
|
leaps: false |
|
}).on("page", function(event, num){ |
|
$(".content-page-start").html("Page " + num); // or some ajax content loading... |
|
}).children('.pagination').addClass('pagination-flat pagination-sm'); |
|
|
|
|
|
// Callback |
|
$('.bootpag-callback').bootpag({ |
|
total: 10, |
|
maxVisible: 6, |
|
leaps: false |
|
}).on("page", function(event, num){ |
|
$(".content-callback").html("Page " + num); // or some ajax content loading... |
|
alert('You have clicked page #' + num); |
|
}).children('.pagination').addClass('pagination-flat pagination-sm'); |
|
|
|
|
|
|
|
// TWBS dynamic pagination |
|
// ------------------------------ |
|
|
|
// Basic |
|
$('.twbs-default').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
prev: 'Prev', |
|
first: null, |
|
last: null, |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-default').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
// Flat style |
|
$('.twbs-flat').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
prev: 'Prev', |
|
first: null, |
|
last: null, |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-flat').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
// Separated style |
|
$('.twbs-separated').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
prev: 'Prev', |
|
first: null, |
|
last: null, |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-separated').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
// Custom button text |
|
$('.twbs-prev-next').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
prev: '⇠', |
|
next: '⇢', |
|
first: '⇤', |
|
last: '⇥', |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-prev-next').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
// Custom start page |
|
$('.twbs-page-start').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
startPage: 3, |
|
prev: 'Prev', |
|
first: null, |
|
last: null, |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-page-start').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
// Set number of visible pages |
|
$('.twbs-visible-pages').twbsPagination({ |
|
totalPages: 35, |
|
visiblePages: 4, |
|
prev: '←', |
|
next: '→', |
|
first: null, |
|
last: null, |
|
onPageClick: function (event, page) { |
|
$('.twbs-content-visible-pages').text('Page ' + page); |
|
} |
|
}); |
|
|
|
|
|
|
|
// Date paginator |
|
// ------------------------------ |
|
|
|
// Basic |
|
$('.datepaginator-default').datepaginator({ |
|
itemWidth: 70, |
|
navItemWidth: 28 |
|
}); |
|
|
|
|
|
// Days format |
|
$('.datepaginator-days-format').datepaginator({ |
|
itemWidth: 70, |
|
navItemWidth: 28, |
|
text: 'dddd<br/>Do' |
|
}); |
|
|
|
|
|
// Hide calendar |
|
$('.datepaginator-calendar').datepaginator({ |
|
itemWidth: 70, |
|
navItemWidth: 28, |
|
showCalendar: false |
|
}); |
|
|
|
|
|
// Highlight selected date |
|
$('.datepaginator-highlight-selected').datepaginator({ |
|
itemWidth: 70, |
|
navItemWidth: 28, |
|
highlightSelectedDate: false |
|
}); |
|
|
|
|
|
// Highlight today's date |
|
$('.datepaginator-highlight-today').datepaginator({ |
|
itemWidth: 70, |
|
navItemWidth: 28, |
|
highlightToday: false |
|
}); |
|
|
|
|
|
// Custom item width |
|
$('.datepaginator-item-width').datepaginator({ |
|
itemWidth: 50, |
|
navItemWidth: 28 |
|
}); |
|
|
|
});
|
|
|