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.
Here’s the code for the Header Template for the Announcements module:
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:
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.
Have fun and good luck!