Adding paging to the core Announcements module

The Announcements module (at the time of writing this, the latest version was 4.0.3) is a very simple DNN core module that lets you present a list of titles and descriptions leading to files, other pages, external links or nowhere at all. It’s customizable via templates, but it doesn’t include any form of paging. So if you have like hundreds of announcements to publish, you probably have to use another module.

 

Not any more, since with a little help from a clever JQuery plugin called Pajinate (download from here), you can add paging to your announcements module. Of course, you’ll be loading all items since Pajinate functions on the client side, but it’s better than not having paging at all.

 

I used the default template that comes with the Announcements module and added what was needed to implement paging on it. Unfortunately, Pajinate does not hide the pager when there’s only one page nor does it hide the First/Previous and Next/Last buttons when we are at the first and last page respectively, so I had to write my own little chunk of Javascript to handle this correctly.

 

Additionally, I adapted the default header and footer templates to include IDs and other stuff needed for pajinate to work correctly. Those IDs are used in the additional javascript code I wrote.

 

So here’s the Javascript code. I suggest you put this code on a separate file (I used pajinatehelper.js) and load it AFTER the pajinate javascript file. You will probably need to change the value of the itemsperpage variable (top of script) to your own preference, as well as the literals for the First/Previous/Next/Last buttons that follow.

//Set the number of items per page
 
var itemsperpage = 10;
$(document).ready(function(){
$('#paging_container').pajinate( {
    item_container_id : '#pagetable',  //This must be left as is
    items_per_page: itemsperpage,    
    nav_label_first: 'First',//Change this to whatever you like
    nav_label_prev: 'Prev',  //Change this to whatever you like    
    nav_label_next: 'Next',  //Change this to whatever you like
    nav_label_last: 'Last'   //Change this to whatever you like
});

//Get the total number of items
var total_items = $('#pagetable').children().size()

//Get the number of pages
var numberofpages = Math.ceil(total_items/itemsperpage);

//Since we start at page 1, hide First/Previous buttons
hideFirstPrev();


//Decide what to hide when user clicks on a page number.
$('#paging_container').find('.page_link').click(function(){

    var currpage = parseInt($(this).attr('longdesc'));
    currpage+=1; //longdesc is 0-based but page numbers start at 1.

    if (currpage==1) {
        hideFirstPrev();
    } 

    else if (currpage==numberofpages) {
        hideNextLast();
    }
    
    else 
    
    {
        showAll();
    }
    
});            

//Hide First and Previous links when the user clicks the First link
$('#paging_container').find('.first_link').click(function(){
        hideFirstPrev();
});            

//Hide Last and Next links when the user clicks on the Last link
$('#paging_container').find('.last_link').click(function(){
        hideNextLast();
});            

//Decide what to hide when the user clicks on the Next or Previous links
$('#paging_container').find('.previous_link,.next_link').click(function(){

    var currpage = parseInt($('#paging_container').find('.active_page').attr('longdesc'));
    currpage+=1; //longdesc is 0-based but page numbers start at 1.

    if (currpage==1) {
            hideFirstPrev();
    }
    else if (currpage==numberofpages) {
            hideNextLast();
    }
    else {
            showAll();
    }

});            


//If we have only one page, disable pager completely.            
if(total_items<itemsperpage){
    $('.page_navigation').hide();
}

});
  
//These are helper functions for hiding / showing First/Last/Next/Previous links
 
 function hideFirstPrev() {
    toggleFirstLastNextPrevControls(1);
 }

 function hideNextLast() {
    toggleFirstLastNextPrevControls(2);
 }

 function showAll() {
    toggleFirstLastNextPrevControls(3);
 }

 function toggleFirstLastNextPrevControls (mode) {

    if (mode==1) {
        $('#paging_container').find('.first_link').hide();
        $('#paging_container').find('.previous_link').hide();
        $('#paging_container').find('.last_link').show();
        $('#paging_container').find('.next_link').show();
    } 
    
    else if (mode==2) 
    {
        $('#paging_container').find('.first_link').show();
        $('#paging_container').find('.previous_link').show();
        $('#paging_container').find('.last_link').hide();
        $('#paging_container').find('.next_link').hide();
    } 
    
    else if (mode==3)
    
    {
        $('#paging_container').find('.first_link').show();
        $('#paging_container').find('.previous_link').show();
        $('#paging_container').find('.last_link').show();
        $('#paging_container').find('.next_link').show();
    }
 }
  

Here’s the code for the Header Template for the Announcements module:

<link rel="stylesheet" type="text/css" href="/portals/0/scripts/pajinate.css"/>
<script type="text/javascript" src="/portals/0/scripts/jquery.pajinate.js">
</script>
<script type="text/javascript" src="/portals/0/scripts/pajinatehelper.js"></script>

<div id="paging_container" style="text-align:left;">
<table class="DNN_ANN_DesignTable" cellspacing="0" summary="Announcements Design Table" border="0" style="border-collapse:collapse;"><tr><td>
<div id="pagetable">

Please note that I include the stylesheet (pajinate.css), the js file for Pajinate (jquery.pajinate.js – you can use jquery.pajinate.min.js too) and my own .js file (pajinatehelper.js) from my /portals/0/scripts folder (I actually created that “scripts” folder, since it didn’t exist in the default skin’s folder structure). You, of course, can load them from whatever path you like, or you can even inject them in the page’s HEAD section (see this post for more on that).

Pajinate demands that the items to be paged are enclosed inside an element with a specific id (in our case, “paging_container”). You can see the complete documentation here. Unfortunately, this doesn’t work well with tables, so I used an enclosing DIV with this id. Of cource, in your implementation, you can ditch the TABLE alltogether and just use DIVs. I tried to alter the default template as little as possible.

Pajinate also needs a second element that contains elements to be paged. I used this also, as a div with “pagetable” id. Those two are configurable (see the script)

And here’s the code for the footer:

</div>
</td></tr></table>
<div class="page_navigation"></div>
</div>

The “page_navigation” div is once again required by pajinate in order to show the pager.

Phew. When you put all the code in place, and ensure that it’s working correctly, the result will be something like this:

The orange pager comes from the default stylesheet that comes with Pajinate. You can, of course, change it at your will. In this example, I used a page size of 2.

CAUTION: Since errors in Javascript can sometimes render your page useless and even disable the edit controls, please take a bookmark of the module edit page URL before you apply changes, so you can always get back to it in case things go wrong.

Have fun and good luck!