问题
I'm trying to modify a Jquery pagination (based on this Jquery pagination tutorial - demo) to work with the awesome twitter bootstrap.
Twitter Bootstrap's standard pagination setup looks like this, so this is the goal for the pagination output structure.
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">Next →</a></li>
</ul>
</div>
So far I can get it to work by changing the html output structure but the active highlighting is not working proper since I changed the output from <a> to the <li> tag.
This is where I am stuck now ATM!
I still need to do the following:
- Disable
prevbutton, when on first page - Change Active
<li>when page is changed - Disable
nextbutton when on last page - Fix the
prevbutton so it works again - fix the next button so it works again
Heres the link to the JsFiddle - somehow it's not working, but the code should be correct (same code as this)
回答1:
Here is the standard jQuery.pagination library, which I have modified to use twitter bootstrap.
create div -
<div id="myPager" class="pagination"></div>
then
$('#myPager').pagination(100,{callback:function(page,component){
console.info(page);
}})
and here is the code for library.
jQuery.fn.pagination = function(maxentries, opts){
opts = jQuery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"javascript:void(0)",
first_text:"First",
last_text:"Last",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){return false;}
},opts||{});
return this.each(function() {
/**
* Calculate the maximum number of pages
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/**
* Calculate start and end point of pagination links depending on
* current_page and num_display_entries.
* @return {Array}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/2);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
return [start,end];
}
/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(page_id, evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* This function inserts the pagination links into the container element
*/
function drawLinks() {
panel.empty();
var list = jQuery("<ul></ul>");
panel.append(list);
var interval = getInterval();
var np = numPages();
// This helper function returns a handler function that calls pageSelected with the right page_id
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
// Helper function for generating a single link (or a span tag if it's the current page)
var appendItem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){
var clazz = appendopts.side ? 'disabled' : 'active';
var lstItem = jQuery("<li class='"+clazz+"'><a>"+(appendopts.text)+"</a></li>")
}
else
{
var a = jQuery("<a>"+(appendopts.text)+"</a>")
.attr('href', opts.link_to.replace(/__id__/,page_id));;
var lstItem = jQuery("<li></li>")
.bind("click", getClickHandler(page_id));
lstItem.append(a);
}
if(appendopts.classes){lstItem.addClass(appendopts.classes);}
list.append(lstItem);
}
// Generate "Previous"-Link
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appendItem(0, { text: opts.first_text, side: true });
appendItem(current_page-1,{text:opts.prev_text, side:true});
}
// Generate starting points
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = Math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
}
}
// Generate interval links
for(var i=interval[0]; i<interval[1]; i++) {
appendItem(i);
}
// Generate ending points
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
}
var begin = Math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appendItem(i);
}
}
// Generate "Next"-Link
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appendItem(current_page+1,{text:opts.next_text, side:true});
appendItem(np - 1, { text: opts.last_text, side: true });
}
}
// Extract current_page from options
var current_page = opts.current_page;
// Create a sane value for maxentries and items_per_page
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
// Store DOM element for easy access from all inner functions
var panel = jQuery(this);
// Attach control functions to the DOM element
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
// When all initialisation is done, draw the links
drawLinks();
// call callback function
//opts.callback(current_page, this);
});
}
回答2:
Assign IDs dynamically to all <li> under #page_navigation, and add or remove the class active based on the IDs.
<script type="text/javascript">
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<ul>';
navigation_html += '<li class="previous_link">';
navigation_html += '<a href="javascript:previous();">← Previous</a>';
navigation_html += '</li>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<li class="page_link" id="id' + current_link +'">';
navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
navigation_html += '</li>';
}
navigation_html += '<li>';
navigation_html += '<a class="next_link" href="javascript:next();">Next →</a>';
navigation_html += '</li>';
navigation_html += '</ul>';
$('#page_navigation').html(navigation_html);
//add active class to the first page link
$('#page_navigation .page_link:first').addClass('active');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
activate_id = page_num;
var get_box = document.getElementById("id"+page_num);
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active class to it
and remove that class from previously active page link*/
$("#page_navigation").find('li.active').removeClass("active");
$(get_box).addClass("active");
//update the current page input field
$('#current_page').val(page_num);
}
</script>
回答3:
The active highlighting is done by twitter's scrollspy javascript plugin. The plugin finds the references to div id's in that page and highlights the menu items automatically when you scroll past them. You can also jump to the desired section because the href attribute of the <a> tag points to a reference on the same page.
A couple things:
- You're 2, 3, 4, 5, and Next menu items all point to the same place
"#"which is just the top of the page. Change them to the html id attributes on this page that you want. - If you want to link to outside html pages or things on this page, you don't need the
"#"sign, just point thehrefto the absolute or relative URI. - The
<li>tag around the<a>is for css formatting for the topbar menu that twitter bootstrap packages.
If you have further questions about the highlighting, take a look at the scrollspy source as it's fairly easy to read.
回答4:
To Disable prev button, when on first page just use this:
<li class="disabled"><a href="#">Previous</a></li>
To Change Active li when page is changed just put the active class to that li in which your page is shown.
To Disable next button when on last page just use as for previous one like:
<li class="disabled"><a href="#">Next</a></li>
回答5:
I totally forgot this post
However i managed to make it work with the following code:
// Based on http://stackoverflow.com/questions/1262919/jquery-active-class-assignment and http://stackoverflow.com/questions/2037501/javascript-add-class-when-link-is-clicked
$(function() {
$('ul.nav li:first').addClass('active').show(); //Activate first tab
$('li a').click(function(e) {
//e.preventDefault();
var $this = $(this);
$this.closest('ul').children('li').removeClass('active');
$this.parent().addClass('active');
//Remove active from dropdown li
$('.dropdown').removeClass('active');
// Activate Home when clicked on the logo
$('.thelogo').click(function()
{
$('.nav li').removeClass('active');
$('.home').addClass('active');
});
});
});
来源：https://stackoverflow.com/questions/8400804/jquery-pagination-twitter-bootstrap