How to Create a Recent/Popular Posts Section with Pagination Using Twitter Bootstrap + JavaScript

Twitter Bootstrap Pagination

Twitter Bootstrap provides a nice design base for displaying a wide range of content, and we can use its styling in a more dynamic sense with the following tutorial. We’re going to focus on using a row with spans + JavaScript to create a functional recent/popular posts snippet. The real beauty of this is that it can also easily be combined with a CMS function like WordPress’s post query.


View Demo | Download Source Files


Markup is fairly simple for our purposes. The demo is barebones from a styling standpoint, but the necessary basics are still included. We’ll need an unordered list with class pager to populate navigable page numbers. Further, a Bootstrap row is built with id popular for a later purpose. Each list item inside make up the contents of the pages. See that “Section 2” comment? Later on, we’re going to specify that the next page should start there. Here’s the HTML:

<div class="container-fluid">
    
    <h2>Most Popular Posts</h2>
    <p>Use the pagination function below the Bootstrap well to navigate!</p>
    <ul class="pager"></ul>

        <ul id="popular" class="row">
            <!-- SECTION 1 -->
            <li class="span3 well">
                <h4>First Post's Title</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas, urna vel ultricies convallis, quam risus faucibus eros, vel porttitor orci eros ut quam.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>This is Post Two's Title</h4>
                <p>Donec ornare lobortis leo. Duis adipiscing vehicula quam eu rhoncus. Etiam commodo dapibus neque vitae tempor.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>Here is a Third Post with a Slightly Longer Title</h4>
                <p>Nunc dui purus, malesuada in libero ac, dapibus euismod justo. Sed purus eros, sollicitudin sit amet est nec, commodo condimentum erat</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>Fourth title; Use the Pager to View More!</h4>
                <p>Sed orci diam, facilisis a ultricies id, molestie tincidunt ipsum. Fusce tempus a lorem sed volutpat molestie tincidunt ipsum.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>

            <!-- SECTION 2 -->
            <li class="span3 well">
                <h4>This is Post Five's Title</h4>
                <p>Donec ornare lobortis leo. Duis adipiscing vehicula quam eu rhoncus. Etiam commodo dapibus neque vitae tempor.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>Post Six Must Be Next!</h4>
                <p>Sed orci diam, facilisis a ultricies id, molestie tincidunt ipsum. Fusce tempus a lorem sed volutpat molestie tincidunt ipsum.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>For Kicks, Let's Add a Couple More of These</h4>
                <p>Nunc dui purus, malesuada in libero ac, dapibus euismod justo. Sed purus eros, sollicitudin sit amet est nec, commodo condimentum erat</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
            <li class="span3 well">
                <h4>The End...is a Great Closing Track to <em>Abbey Road</em></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas, urna vel ultricies convallis, quam risus faucibus eros, vel porttitor orci eros ut quam.</p>
                <a href="#" class="btn">Read More &raquo;</a>
            </li>
        </ul>

</div>

JavaScript will make the dynamic content switchout possible. Here’s a quick look at what it looks like:

$(document).ready(function() {
        
var listElement = $('#popular');
var perPage = 4; 
var numItems = listElement.children().size();
var numPages = Math.ceil(numItems/perPage);

$('.pager').data("curr",0);

var curr = 0;
while(numPages > curr){
  $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo('.pager');
  curr++;
}

$('.pager .page_link:first').addClass('active');

listElement.children().css('display', 'none');
listElement.children().slice(0, perPage).css('display', 'block');

$('.pager li a').click(function(){
  var clickedPage = $(this).html().valueOf() - 1;
  goTo(clickedPage,perPage);
});

function goTo(page){
  var startAt = page * perPage,
    endOn = startAt + perPage;
  
  listElement.children().css('display','none').slice(startAt, endOn).css('display','block');
  $('.pager').attr("curr",page);
}

});

You can see that we’ve called out #popular to contain the actual content then specified 4 list items per page. Next, the pager is dynamically created and built upon as more list items are added. So, how does the pager know to load section 4’s contents if clicked? That’s handled by the function goTo with very little scripting.

That’s all we need to complete our basic demo. Want to take it a step further? What if you wanted additional “next” and “previous” functionality? From the JavaScript angle, this would work:

function previous(){
  var goToPage = parseInt($('.pager').data("curr")) - 1;
  if($('.active').prev('.page_link').length==true){
    goTo(goToPage);
  }
}

function next(){
  goToPage = parseInt($('.pager').data("curr")) + 1;
  if($('.active_page').next('.page_link').length==true){
    goTo(goToPage);
  }
}

Download the source files and try adding it in for yourself! Check out the original basic demo too for an example of how it all works.


View Demo | Download Source Files


About Michael Milstead

Michael is a front-end developer who has enjoyed building websites for the past seven years.

2 Comments

  • Tarek Akrout says:

    Hi Michael,
    I suggest you modify your code as a result to make the display Thumbnails in the same line:
    ————————————————————————————————————————————-

    Most Popular Posts
    Use the pagination function below the Bootstrap well to navigate!

    1
    2

    First Post’s Title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas, urna vel ultricies convallis, quam risus faucibus eros, vel porttitor orci eros ut quam.
    Read More »

    This is Post Two’s Title
    Donec ornare lobortis leo. Duis adipiscing vehicula quam eu rhoncus. Etiam commodo dapibus neque vitae tempor.
    Read More »

    Here is a Third Post with a Slightly Longer Title
    Nunc dui purus, malesuada in libero ac, dapibus euismod justo. Sed purus eros, sollicitudin sit amet est nec, commodo condimentum erat
    Read More »

    Fourth title; Use the Pager to View More!
    Sed orci diam, facilisis a ultricies id, molestie tincidunt ipsum. Fusce tempus a lorem sed volutpat molestie tincidunt ipsum.
    Read More »

    This is Post Five’s Title
    Donec ornare lobortis leo. Duis adipiscing vehicula quam eu rhoncus. Etiam commodo dapibus neque vitae tempor.
    Read More »

    Post Six Must Be Next!
    Sed orci diam, facilisis a ultricies id, molestie tincidunt ipsum. Fusce tempus a lorem sed volutpat molestie tincidunt ipsum.
    Read More »

    For Kicks, Let’s Add a Couple More of These
    Nunc dui purus, malesuada in libero ac, dapibus euismod justo. Sed purus eros, sollicitudin sit amet est nec, commodo condimentum erat
    Read More »

    The End…is a Great Closing Track to Abbey Road
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas, urna vel ultricies convallis, quam risus faucibus eros, vel porttitor orci eros ut quam.
    Read More »

    ————————————————————————————————————————————-
    I take this opportunity to invite you to visit our newly launched
    – Github project that you can find at the following link http://twittstrap.com/twittstrap
    http://twittstrap.com grouping all your bootstrap needs in one place.
    and take permission to add this tutorial to our sinnepts That you can find at the Following link http://www.twittstrap.com/twittstrap/snippets

  • Tarek Akrout says:

    the modifications are:
    after the body –> div class=”container-fluid” 1.replace container-fluid by container
    ul id=”popular” class=”row” 2.replace row by row-fluid

Leave a Reply

What is 6 + 2 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Start planning your project today. Get Started