Change layout of pagination controls?

[scotty6435]

The pagination controls as they stand are just a list of links. Would it be possible to add functionality to populate an unordered list? Bootstrap has a good pagination style and this script is great but needs some serious tweaking to get it working correctly.

[luis-almeida]

Hi @scotty6435, sorry for the late reply!
It's perfectly posible to change the markup of the navigation links.
You just need to replace the functions wirteNav and writeBtn with the following code and you will have the links wrapped in list items (inside an unordered list).

Plugin.prototype.writeNav = function () {
    var i = 1, navhtml = "<ul>";

    navhtml = this.writeBtn( "first" ) + this.writeBtn( "previous" );

    for ( ; i <= this._numPages; i++ ) {

        if ( i === 1 && this.options.startRange === 0 ) {
            navhtml += "<li><span>...</span></li>";
        }

        if ( i > this.options.startRange && i <= this._numPages - this.options.endRange ) {
            navhtml += "<li><a href='#' class='jp-hidden'>";
        } else {
            navhtml += "<li><a>";
        }

        switch ( this.options.links ) {
            case "numeric" :
                navhtml += i;
                break;
            case "blank" :
                break;
            case "title" :
                var title = this._items.eq(i-1).attr("data-title");
                navhtml += title !== undefined ? title : "";
                break;
        }

        navhtml += "</a></li>";

        if ( i === this.options.startRange || i === this._numPages - this.options.endRange ) {
            navhtml += "<li><span>...</span></li>";
        }
    }

    navhtml += this.writeBtn( "next" ) + this.writeBtn( "last" ) + "</ul></div>";

    return navhtml;
};

Plugin.prototype.writeBtn = function ( which ) {

    return this.options[which] !== false && !$( this[ "_" + which ] ).length ? 
        "<li><a class='jp-" + which + "'>" + this.options[which] + "</a></li>" : "";

};

I haven't tested it but it should work.
Let me know if it helped :)

Cheers!

[scotty6435]

No problem, the reply is appreciated! The only issue with your solution above is that the focus is still the links/spans instead of the list items (i.e. classes aren't applied to the parent element). Changing this required amends throughout the code, making it uglier however this allows it to integrate into the Bootstrap pagination styles much more easily. I won't fork or anything because it's probably a niche use case and the changes I made were really scrappy.

[macsupport]

On a similar note, I changed the Pagination to bootstrap style buttons and button groups and integrating font awesome icons, using less.js to change the colors etc..
Also, I integrated the thumbs with a Lightbox function.

Demo Page

[grandmanitou]

Hi Luis.

The functions you provide for replacement work perfectly.
But what about the active state on the parent LI element?
To solve that issue, replace also the following function

    updateCurrentPage : function(nav, page) {
      nav.currentPage.removeClass("jp-current");
      nav.currentPage.parent('li').removeClass("active");
      nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");
      nav.currentPage.parent('li').addClass("active");
    },

[EvilBMP]

Just had the same issue. Here is my solution - in case somebody will find this thread via google like me.

http://jsfiddle.net/80602qjq/4/

[marlonleite]

cool, thanks EvilBMP :)