For a project client, I had to create a blog view with articles coming from different categories. Good news, it's really not a concern with mod_article_category module because this awesome module can manage the client's requirements. The only issue is the length of the page because the huge articles quantity generate a massive scroll.
So, I had no other choice to add a pagination system in the module to control the layout. You'll see, it works pretty well and it's a really light and safe override.
If you need such feature for your site or for a client's project, here is my solution (don't forget to bookmark the page with CTRL + D). Feel free to copy it and improve it per your requirements.
How to add a pagination in a Joomla module?
If you're not familiar with the overriding process in Joomla, I would strongly recommand you to read first this tutorial How to Create Overrides in Joomla - Part 1 before starting this one. It's really helpful and you'll learn a lot (I guess so).
If you're already familiar with the override, let's move a step forward.
In this tutorial, I'm using mod_article_category but it works with any other module displaying Joomla content. So, you can chose another module, the result will be the same.
In general, a site pagination system is powered with JavaScript. So, as we can't use the native Joomla pagination system here, we'll add another one.
I've selected jPages from Luis Almeida. This is a client side pagination with jQuery and CSS3 but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.
Apart from all its features, the main difference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them. That's perfect for our override !
Download the .zip on your computer and unzip the archive.
Here, we only need to copy the content of jPages.min.js in our Joomla template.
Create the override in Joomla
The first thing to do is to create a new JS file named simplePagination.min.js in the js folder of your template.
Copy / paste the content of jPages.min.js in your new file and hit the Save and close button.
Now, create the override of your module in your template following the tutorial I've shared earlier.
Right after the ?> php symbol, add the following code:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?php echo $tpatch; ?>js/simplePagination.min.js"></script>Then, after the latest </div> at the end of the override, add the following code:
<script type="text/javascript">
$(document).ready(function () {
$("div.my-pagination").jPages({
containerID: "article-list",
perPage: 25, // number of articles to display per page
keyBrowse: true,
scrollBrowse: false,
previous : "Previous",
next : "next",
});
$(".my-pagination a[href='#']").click(function() {
$("html, body").animate({ scrollTop: 80 }, "slow");
});
});
</script>The latest point is adding the pagination inside the override markup.
To do so, simply add the following HTML code where you want to display the pagination system. Usualy, it's at the bottom of the page.
In this case, before the lastest </div>, add this snippet:
<div class="my-pagination invisible text-center"></div>This should gives you the following code for your override:
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$tpatch = JURI::base(true).'/templates/'.$app->getTemplate().'/';
?>
<!-- Let's add the jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?php echo $tpatch; ?>js/simplePagination.min.js"></script>
<!-- Override markup -->
<div class="article-list" id="article-list">
<?php foreach ($list as $item) : ?>
<div class="">
</div>
<?php endforeach; ?>
<!-- Let's add the pagination at the bottom-->
<div class="my-pagination invisible text-center"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("div.my-pagination").jPages({
containerID: "article-list",
perPage: 25, // number of articles to display per page
keyBrowse: true,
scrollBrowse: false,
previous : "Previous",
next : "next",
});
$(".my-pagination a[href='#']").click(function() {
$("html, body").animate({ scrollTop: 80 }, "slow");
});
});
</script>Let's add the CSS style to our pagination
Because styling depends on your template and the graphical charter of your iste, you're free to copy or completly change the following classes.
Because I didn't needed these classes elsewhere on the client's site, I've added the <style> tag at the end of my override.
<style>
.my-pagination {
display: block;
position: relative;
min-height: 60px;
line-height: 60px;
}
.my-pagination a {
margin: 0 15px;
color: #353535;
cursor: pointer;
text-decoration: none !important;
}
.my-pagination a:hover {
text-decoration: none;
}
.my-pagination a.jp-current {
border-bottom: 2px solid;
width: 19px;
display: inline-block;
height: 45px;
color: #1A62B7;
}
.my-pagination .jp-previous.jp-disabled,
.my-pagination .jp-next.jp-disabled {
background: rgb(242, 242, 242);
padding: 16px 30px;
border-radius: 5px;
color: #BABABA !important;
cursor: auto;
}
.my-pagination .jp-previous.jp-disabled {
margin: 0 50px 0 0 !important;
}
.my-pagination .jp-next.jp-disabled {
margin:0 0 0 50px !important;
}
.my-pagination .jp-previous {
background: rgb(26, 98, 183);
padding: 16px 30px;
border-radius: 5px;
color: #FFF !important;
margin: 0 50px 0 0 !important;
cursor: pointer;
}
.my-pagination .jp-next {
background: rgb(26, 98, 183);
padding: 16px 30px;
border-radius: 5px;
color: #FFF !important;
margin:0 0 0 50px !important;
cursor: pointer;
}
</style>Et voilà!
You've added a pagination in your Joomla module like a pro! Don't hesitate to share this tutorial around you if you like it. If you have any comment or questions, you can contact me.
Thanks for reading!
