Joomlant - All about Joomla!

Using JPagination together with Grid.Sort in Frontend

If you don't know, you cannot directly use JPagination together with JHTML::_('grid.sort') in your component at frontend. I found this problem when I develop component to be used in Intranet. I want to let administrators of the component perform their functions in frontend. As you know in backend if they are administartor then I cannot limit their access to only one specific component. However I can do this in frontend and only give theme a registered group member.

The problem occurs if users click on the table header to sort using GRID.SORT and then they click on pagination links e.g. START, PREV, NEXT .... The component will let them to the wrong page. For example, first they go to the page with this url

             index.php?option=com_jtimesheet&task=timesheet.getlist&m=my&Itemid=76

Here, I use controller.task in the url and there are many links with different paramerter m=my, m=all, m=approval etc. When a user goes to this page with above url. and clicks pagination link. It works fine as it creates correct link in this case but when the user clicks on grid to sort the url will reduced to index.php?option=com_jtimesheet&Itemid=76. This is action attribute on the form I used. Ok, there is no problem with grid.sort as I provide hidden input field in the form (task and m in this case). But if user click on pagination link it will go to url

 index.php?option=com_jtimesheet&Itemid=76.

Which is not desired result. The problem occurs only in frontend as JPagination creates link like this <a href="/component/jtimesheet/?Itemid=76"...> and you may have seen the problem it constructs wrong url. But at backend JPagination use onclick of anchore instead like thisย ย  <a href="#" onclick="javascript:........">. And it works in backend as all forms we used (if you familiar with it) are name "adminForm". But we don't have to do so in frontend (as in fromtend we want to use ToolBar and Joomla's JavaScript). You can change this to test if it work by changing pagination.php in your current template folder/html. So whatย are the solution?

As I mentioned, I develop many components for Intranet and all of them use these behaviors I mean grid.sort and pagination. So I have to consider re-use of the solution. Before going to my solution, please re-call that in model we implement JPagination like this

function getPagination()
{
         // Load the content if it doesn't already exist
         if (empty($this->_pagination)) {
                 jimport('joomla.html.pagination');

                 $this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );

          }
           return $this->_pagination;ย ย ย  
  }

Thus I want to make a little modification, and after looking at Joomla's JPagination class and one of its feature that is, it supports template chrome. In otherword you can override pagination display in template. In this case Joomla (JPagination) will look for html/pagination.php in your current template folder. So I decide to extend JPagination class by overriding some parts of its function. As you expected I will override the loading of chrome file to use another file e.g. joomlant.pagination.php which resides in the same folder as original template 's pagination.php. In this pagination chrome file I will use onclick instead of url link. This is posible as all of my components will use it and all of them use form named 'adminForm'. Then I can change all of my model to use this extended class named JPaginationExt as following

function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
require_once(JPATH_COMPONENT.DS.'libraries'.DS.'pagination.class.php');
$this->_pagination = new JPaginationExt($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
   }
return $this->_pagination;ย ย ย 
}

As we can see from this point jus little modification, but we also have some rules that are:-

1. We always use form named 'adminForm'

2. We will provide all hidden input in the url in this form e.g. in my case 'task' and 'm'

3. Always put $this->pagination->getListFooter() within this form.

And that is just a simple solution I used to solve this problem. In my component, I am also implement frontend toolbar by extending JView with my new layout file in the class 's display. So all of my views extend from this base view and can use JToolBarHelper as we do in Backend. One thing, I have to provide all Icon images and CSS in my component too. And I just use this implementation in all of my component.

• < Prev
• Next >