K2 content module with pagination - jQuery flavor

Preparation

There are many jQuery pagination plugins available, you can use any of them, but for this tutorial I used jPages plugin because it is easier for me to integrate with the K2 content module, you can download it and have a quick look at the documentation and examples for more features.

After downloading jPages, extract the file, create 'assets' folder inside modules/mod_k2_content, then create two folders inside 'assets': 'css' and 'js'.

Move jPages.min.js from jPluginFolder/js to modules/mod_k2_content/assets/js, also move jPages.css from jPluginFolder/css to modules/mod_k2_content/assets/css.

Implementation

Now let's start with adding a new parameter in the file: mod_k2_content.xml to configure items count per page, let's call the parameter 'itemsPerPage', insert this code at line 38:

<field name="itemsPerPage" type="text" size="4" default="5" label="Items Per Page" description=""/>

Let's add another parameter to switch pagination on and off, insert this code after the above line:

<field name="enablePagination" type="radio" default="0" label="Enable Pagination" description="">
    <option value="0">K2_NO</option>
    <option value="1">K2_YES</option>
</field>

Save the mod_k2_content.xml file

Next, edit the mod_k2_content.php file to insert the code that will load the jPages plugin and initiate it, insert the below code starting from line 28:

if ($params->get('enablePagination')){
    $doc = JFactory::getDocument();
    $doc->addScript('modules/mod_k2_content/assets/js/jPages.min.js');
    $doc->addStyleSheet('modules/mod_k2_content/assets/css/jPages.css');
    $js = '$K2(document).ready(function(){ $K2("div#holder'.$module->id.'").jPages({
            containerID : "k2ModuleList'.$module->id.'",
            perPage : '.$params->get('itemsPerPage', 1).'
        });    
    });';
    $doc->addScriptDeclaration($js);
}

Save the mod_k2_content.php file

At last, edit the tmpl/Default/default.php file (or the template override file if you use overrides) to insert the pagination holder element and prepare the items list <ul> to work with jPages plugin.

Modify the <ul> at line ~22 to be:

<ul id="k2ModuleList<?php echo $module->id; ?>">

and add an empty div, to hold the page links with numbers, after the closing </ul>, at line ~189, make sure it has a CSS id="holder<?php echo $module->id; ?>", like this:

<?php if ($params->get('enablePagination',0)): ?> 
   <div id="holder<?php echo $module->id; ?>"></div>
<?php endif; ?>

Save tmpl/Default/default.php file.

Configuration and Test

Now, login to the backend, edit the module to configure the pagination parameters, set 'Enable Pagination' to Yes, and set Items Per Page, say 1, save and view the module, it should look like this:

I have setup the example module below to show the pagination working

This tutorial is prepared using Joomla! 3.x, K2 2.6.8 and jPages v0.7
If you want to get an installation copy with the above modifications, it is attached below, just click tweet to download it.

If you like to add more features or customizations to this module with pagination, contact me to get a quote.

References

For more plugins, I found these 2 references are helpful:
jQuery Pagination Plugins
10+ jQuery Pagination Plugins

My facebook page

Follow me on Twitter