Implementing Grid sort functionality at frontend

In order to implement the Grid sort and Pagination, you have to update the following files.

update breeds.php        /site/models/breeds.php

update view.html.php   /site/views/breeds/view.html.php

update default.php       /site/views/breeds/tmpl/default.php

File Details


  	$ordering = $app->input->get('filter_order');

		if (!empty($ordering))
			$list             = $app->getUserState($this->context . '.list');
			$list['ordering'] = $app->input->get('filter_order');
			$app->setUserState($this->context . '.list', $list);

		$orderingDirection = $app->input->get('filter_order_Dir');

		if (!empty($orderingDirection))
			$list              = $app->getUserState($this->context . '.list');
			$list['direction'] = $app->input->get('filter_order_Dir');
			$app->setUserState($this->context . '.list', $list);

		$list = $app->getUserState($this->context . '.list');

		if (empty($list['ordering']))
	$list['ordering'] = 'ordering';

if (empty($list['direction']))
	$list['direction'] = 'asc';

		if (isset($list['ordering']))
			$this->setState('list.ordering', $list['ordering']);

		if (isset($list['direction']))
			$this->setState('list.direction', $list['direction']);

I have deeply gone through breeds.php model file, its structure, purpose and its declared methods in the previous step. In this part of tutorial, I am little bit refreshing those things again and then I will explain you in detail what code addition is done, in order to achieve grid sorting functionality on records listing.

First download the component zip file, unzip it and go to, site / models / breeds.php file and here, as you can see we have added the above mentioned code to the populateState() method, along with passing two values, the ordering and direction. So, starting from the first line of breeds.php model file,  we have imported modellist utility on line 5. Then after declaring the model class, we have called the parent class populate state method which is located in the JModelList class. This method handles the current state of a variable which it gets from a request. On line 15 aqnd 18, as I have explained before that $limit and $limitstart properties are getting the state of the values coming from limit and limnitstart requests, which are necessary for pagination method to work properly.

Now coming to our actual topic of implementing grid sorting on listing columns. On line 21, the $ordering property is getting the value of filter_order form object and the request is coming from our main breeds listing page. It is the name of the column on behalf of which the sorting process will occur. Now from line 23 to 28, there are some key points to understand. Considering $ordering value not empty, on line 25, we are calling getuserstate method from $app object and passing it the list array of current component, referred to as $this->context and the $list will hold its value. Among many of the list array keys, we are calling ‘ordering’ here and passing it the value gotten from ‘filter_order’. Now we have gotten the updated list, with most updated values and passing these values to the actual list on line 27 through setUserState method.

I truly understand that this step could be difficult to understand for some newbies because it is a little bit complicated. But if you would have any questions regarding that, you can post that in comments section and I would be right there to assist you.

After that from line 30 to 37, we are doing the same thing with $orderingDirection as we have done with $ordering. Asthe name of the property indicates, it will store the ordering direction of the list on the basis of column name, we have gotten through $ordering. We are getting the value of ‘filter_order_Dir’ form object and passing it to the list array, which is then updating the main component list array through $setUserState method.

When all of this getting and setting process is completed, we are accessing the most updated list array on line 39, assuming that values of ‘filter_order’ and ‘filter_order_Dir’ are provided. Now there could be a situation that user is not sorting the list from any column and in this situation, $list[‘ordering’] and $list[‘direction’] will become empty. Now in this case, we are passing the value ‘ordering’, which is the name of the database table column on which we are executing the query. Similarly, if there is no direction information available, ‘asc’ is passed as default, as it is done on line 48.

Till yet, we have gotten the values of $list[‘ordering’] and $list[‘direction’] but are doing nothing with it. On line 53 and 58, we are passing these values to list ordering and list direction respectively through setstate() method, called through this specifier, reffering to current component. Here is our populateState() method code is complete and now we are moving to make modification to our main query so that it could be able to sort and order the results, it is getting from database.

  		$orderCol  = $this->state->get('list.ordering');
		$orderDirn = $this->state->get('list.direction');

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

Now coming to getListQuery(), on line 80 and 81, we are getting values of ordering column name and ordering direction which we have set in the populatestate method. We will add these to ORDER clause on line 85. In this way, till yet our model code is completed. After that I am moving to the view file and will tell you what modifications should be made to view.html.php file, corresponding to the model on which we have just worked.


  protected $state;
  $this->state = $this->get('State');

Now open the frontend breeds view.html.php file of the downloaded source code of this step and youcan see that in this file, we have added two lines, line 11 and 16. At line 11, we have declared a protected $state property and on 16, we are assigning the current state of request variables from model and assigning this to the $state property, which will then be passed on to the default.php.


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

Now walking through the default.php file code. first of all, on lines 7 and 8, we are getting the order column and direction. As in the view class, you can see that we have a protected property called “$state” to which we assigned a value and this is where we are getting that value through $this specifier. These values correspond to the current state and of the selected column and ordering direction respectively. The values gotten here could be filtered through escape method to prevent any malicious code injetcion attack.

Next comes the main form which encloses all of our breeds listing. In the form action attribute, I am using Joomla’s JRoute class and calling a static method called underscrore (_). In Joomla API, most commonly used methods are frequently represented by underscore. JRoute is used to support SEF urls in the frontend and I will discuss this is detail in the end of the course, when we would be creating support for SEF urls in our component, to make them more user and SEO friendly.

	<th class=''>
	<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_BREEDNAME', 'a.breedname', $listDirn, $listOrder); ?>
	<th class=''>
	<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_PIC', 'a.pic', $listDirn, $listOrder); ?>
	<th class=''>
	<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_BREEDCAT', 'a.breedcat', $listDirn, $listOrder); ?>

Inside the form, there is a table in which we are displaying results from database, coming from model, in a well displayed tabulated listing. In the thead section, the first column is the record ID. The next heading is the name of the record and from here we would want to have clickable headings to change the sorting state of a column in the list. Here we are using a helper, JHtml class, which has to deal with HTML output format. As we discussed underscore method of JRoute class, the JHtml class also has an underscore method through which common functionality could be accomplished. The JHtml class is equipped with a lot of helpers, contained in different separated files and their methods could be accessed through a dot notation and the result of this helper is echoed, whenever we use JHTML class. Now walking through the arguments of JHtml, on line 28, the first argument is “grid.sort” and according to my explanation, this clearly means that grid is the name of the file in which there is a function named, “sort” and the rest of the arguments are also passed to it.

After grid.sort, we are passing 4 arguments which are, the language string for the heading; the corresponding database table field name that this column represents; the active direction of the list ordering, whether it is ascending or descending and this variable is declared on line 8 of above mentioned code. After that the final argument represents the active column on the basis of which the list will be ordered. After this column, you will see that the structure of the next columns is the same and they inherit the same logic. On line 23, for the ID column, I have not column ordering, just to eloborate you that if you want to make a column, not to soted, thats how you can accomplish this.

Now, after that, we have actual processing in the “tbody” section, as you can see that table rows are going through a foreach loop and displaying the records. I have explained this in detail in “connecting to database” step of the tutorial and you can refer to it again, if the things are not fresh in your mind.

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

Download Zip File

Next –> Adding search feature to Component Frontend list view


Add a Comment

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


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