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

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

---