Implementing Grid sort and pagination at backend

Files to create / Update

Update breed.php /administrator/models/breed.php

Update view.html.php /administrator/views/breed/view.html.php

Update default.php /administrator/views/breed/tmpl/default.php

Files Details


public function __construct($config = array())
		if (empty($config['filter_fields']))
			$config['filter_fields'] = array(
				'id', 'a.`id`',
				'ordering', 'a.`ordering`',
				'state', 'a.`state`',
				'created_by', 'a.`created_by`',
				'breedname', 'a.`breedname`',
				'pic', 'a.`pic`',
				'breedcat', 'a.`breedcat`',


	protected function getListQuery()

		$db    = $this->getDbo();
		$query = $db->getQuery(true);

		// Select the required fields from the table.
					'', 'DISTINCT a.*'

		$query->from('`#__breed_breed` AS a');
		$orderCol  = $this->state->get('list.ordering');
		$orderDirn = $this->state->get('list.direction');

		if ($orderCol && $orderDirn)
			$query->order($db->escape($orderCol . ' ' . $orderDirn));

		return $query;

 Implementing Grid Sort:   In the breeds model class we are overriding the default constructor and adding a list of fields that could be sort.

We are overriding the default JModelList constructor here which takes a configuration array as argument and in the contructor method, we are calling the filter_fields config array. In overriding the constructor we are first checking that whether the settings have been defined previously or not and if they are not, we are providing defaults values here. We are defining here the field names which can be used in the queries and if you are passing any other variables as the basis for filtering the list, they will not be accepted. In short you can take it as, when you click on any column heading for sorting, populateState method, which I have discussed in the previous lessons, picks the value, passed to it by the request and then it matches the list of fields defined in the filter_fields config array, in this constructor method.

Now the question is, why we are doing all this stuff and which problem, it is solving. The answer is, we are allowing the user to filter on the basis of only those fields which we want him to filter. So, in this way, no hacking code could be inserted in the filter column and that makes the process completely safe.

So the config array will contain the fields that are valid and then the parent constructor is called. Now lets talk about the populateState function that we have discussed while working on  creating the grid sort feature at frontend. In the backend, populateState method is extensively used and ordering and direction are already being passed to this method, so we dont have to do anything here. As ordering is a major and most used function, so joomla includes this feature by default. We have to make some changes to our main query now, by adding code from line 45 to 51. It is getting the list ordering and list direction and assigning it to two variables, $orderCol and $orderDirn respectively. On line 48, first we check that we actually have a column which we can sort by. After that, we call the order function through query object and then pass the column name and direction.


    protected $pagination;

	protected $state;
	public function display($tpl = null)
		$this->pagination = $this->get('Pagination');
		$this->state = $this->get('State');

We have added some new code to the view.html.php file, to support pagination and grid sorting in the list view of the component, we are developing. On line 12 and 14 of above mentioned code, we have created two protected properties, $pagination and $state and on lines 19 and 20, we are first assigning the state property, the values of the request variables from the state method and secondly, we are getting pagination so that we can get or call methods related to pagination, in the default.php layout file.


$listOrder = $this->state->get('list.ordering');
$listDirn  = $this->state->get('list.direction');

Now lets start working on the default.php file to implement grid sort and pagination feature to the list view. In this file code above, on line 6 and 7, we are getting the current state of ordering and direction requests and passing these values to $listOrder and $listDirn respectively. We are again using, php method chaining concept here and through $this specifier, We are getting ordering and direction vaues through state property, to which we have assigned values in view.html.php file. Keeping security in mind, you can also filter the results of these two properties through escape method, while working on the production environment.

					<th width="1%" class="hidden-phone">
						<input type="checkbox" name="checkall-toggle" value=""
							   title="<?php echo JText::_('JGLOBAL_CHECK_ALL'); ?>" onclick="Joomla.checkAll(this)"/>

						<th width="1%" class="nowrap center">
	<?php echo JHtml::_('grid.sort', 'JSTATUS', 'a.`state`', $listDirn, $listOrder); ?>
						<th class='left'>
				<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_BREEDNAME', 'a.`breedname`', $listDirn, $listOrder); ?>
				<th class='left'>
				<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_PIC', 'a.`pic`', $listDirn, $listOrder); ?>
				<th class='left'>
				<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_BREEDCAT', 'a.`breedcat`', $listDirn, $listOrder); ?>

					<?php if (isset($this->items[0]->id)): ?>
						<th width="1%" class="nowrap center hidden-phone">
							<?php echo JHtml::_('grid.sort', 'JGRID_HEADING_ID', 'a.`id`', $listDirn, $listOrder); ?>
					<?php endif; ?>

After this small php code, there comes our main form, which holds all of our listing related code and data. I have explained this in detail, while working on the frontend grid implementation, but let me briefly go through this form here, to refresh those things in your mind. The listing form is submitted back to the same view and the tasks are sent to controller for processing, through a post method. We are displaying the listing, in the form of a table, so that the data, coming from database could be well organized and grid sorting could be implemented easily. In the table head section, the first column is a Global checkbox field, which purpose is to select or unselect all the checkboxes in the list that would be populated in the body section on the table and on the basis of these checkboxes, few or all the records could be selected for implementing different operations on them through toolbar, including publich / unpublish,delete, edit etc, which I will cover in next lessons. onclick=”Joomla.checkAll(this)” event is a call to Joomla javascript related code, to check / uncheck the checkboxes and this function is already written in joomla javascript code, so you dont have to worry about this and just need to call it.

Then on line 22, we are writing the header column for representing the publish / unpublish state of the single item. We are displaying the column name through JHtml class, which will equip it with all the necessary html code and javascript calls to implement grid sorting on this column. The first argument is a call to JHtml grid sorting method and the next is simply the name of column in a language string. After this, we are passing the coresponding database table field name on the basis of which the records will be sorted, when the user will click on this column. Then comes the list ordering direction and after that, the last argument represents that sorting process is occuring on the basis of this column.

The other header columns work in the same way. After that, the <tbody> section comes and I have explained it in detail, in the previous step, and so, if things are not fresh in your mind regarding that, you can refer to the previous step.

			<td colspan="<?php echo isset($this->items[0]) ? count(get_object_vars($this->items[0])) : 10; ?>">
				<?php echo $this->pagination->getListFooter(); ?>

From line 80 to 86, we have added the pagination related code, to display pagination in the table footer section. In the colspan section, the code is calculating number of columns it has to cover, to construct a proper layout for the pagination buttons. And then on line 83, there comes our actual pagination code. The getListFooter() is a JPagination class method which generates the buttons and their links.

	<input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>"/>
	<input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>"/>    

When there would be a click on any column, javascript will come into action and on the basis of url generated, it will fill some input fields which will correctly order the list. Please have a look at line 91 and 92, where we have added those. In the value section of fields filter_order and filter_order_Dir, we are using the values, coming out from the request.

Download Code

Next –> Implementing item ordering at backend

Add a Comment

Your email address will not be published. Required fields are marked *

Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...


My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib


Request a Quote