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

/site/models/breeds.php

  	$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 thoroughly gone through the breeds.php model file, its structure, purpose, and its declared methods in the previous step. In this part of the tutorial, I am going to refresh a little bit on those things again, and then I will explain to you in detail what code addition is done in order to achieve grid sorting functionality on record listings.

First, download the component zip file, unzip it, and go to the site/mmodels/bbreeds.php file; 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 the breeds.php model file, we have imported the modellist utility on line 5. Then, after declaring the model class, we called the parent class’s 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 lines 15 and 18, as I have explained before, the $limit and $limitstart properties are getting the state of the values coming from limit and limitstart requests, which are necessary for the pagination method to work properly.

Now, let us return to our original topic of implementing grid sorting on listing columns. On line 21, the $ordering property is getting the value of the 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 lines 23 to 28, there are some key points to understand. Considering $ordering value is not empty, on line 25, we are calling the getuserstate method from the $app object and passing it the list array of current components, 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 the updated list, with the most updated values, and we are passing these values to the actual list on line 27 through the 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 have any questions regarding that, you can post them in the comments section, and I will be right there to assist you.

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

When all of this getting and setting is completed, we are accessing the most updated list array on line 39, assuming that values for “filter_order” and “filter_order_Dir” are provided. Now there could be a situation where the 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 by 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.

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

  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.

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

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

Now we’ll go over the code in the default.php file. 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 the “this” specifier. These values correspond to the current state and to the selected column and ordering direction, respectively. To prevent malicious code injection attacks, the values obtained here could be filtered using the escape method.

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>
	<th class=''>
	<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_PIC', 'a.pic', $listDirn, $listOrder); ?>
	</th>
	<th class=''>
	<?php echo JHtml::_('grid.sort',  'COM_BREED_BREEDS_BREEDCAT', 'a.breedcat', $listDirn, $listOrder); ?>
	</th>

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 the 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 included column ordering to demonstrate that if you want to create a column that is not soted, this is how you can do it.

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