jQuery pagination + Twitter Bootstrap

Question

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

Answer 1

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>

Answer 2

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 the href to 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.

Answer 3

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);
    });
}

Answer 4

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();">&larr; 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 &rarr;</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>

Answer 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');
            });
    });
});