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

/administrator/models/breed.php 

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`',
			);
		}

		parent::__construct($config);
	}
 

	protected function getListQuery()
	{

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

		// Select the required fields from the table.
		$query
			->select(
				$this->getState(
					'list.select', '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 function Object() {
[native code]
} and adding a list of fields that could be sorted.

We are overriding the default JModelList function Object() {
[native code]
} here, which takes a configuration array as an argument, and in the function Object() {
[native code]
} method, we are calling the filter_fields config array. In overriding the constructor, we are first checking whether the settings have been defined previously or not, and if they have not, we are providing default values here. We are defining here the field names that 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 function Object() {
[native code]
} method.

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

So the config array will contain the fields that are valid and then the parent function Object() {
[native code]
} is called. Now let’s talk about the populateState fvalid,on that we have discussed while working on creating the grid sort feature at the frontend. In the backend, the populateState method is extensively used, and ordering and direction are already being passed to this method, so we don’t have to do anything here. As ordering is a major and most-used function, Joomla includes this feature by default. We have to make some changes to our main query now by adding code from lines 45 to 51. It is getting the list order and list direction and assigning them to two variables, $orderCol and $orderDirn, respectively. On line 48, first we check that we actually have a column that we can sort by. After that, we call the order function through the query object and then pass the column name and direction.

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

    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 lines 12 and 14 of the 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.

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

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

Now let’s start working on the default.php file to implement grid sorting and pagination features in the list view. In the file code above, on lines 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 the php method chaining concept here, and through the $this specifier, we are getting ordering and direction values through state properties, to which we have assigned values in the view.html.php file. Keeping security in mind, you can also filter the results of these two properties through the escape method while working on the production environment.

	<tr>
		
					<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>

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

					<?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); ?>
						</th>
					<?php endif; ?>
				</tr>

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 the controller for processing through the post method. We are displaying the listing in the form of a table so that the data coming from the database can be well organised and grid sorting can be easily implemented.

The first column in the table head section is a global checkbox field, whose purpose is to select or unselect all the checkboxes in the list that will be populated in the table’s body section, and on the basis of these checkboxes, few or all of the records could be selected for implementing different operations on them through the toolbar, such as publish, unpublish, delete, edit, and so on, which I will cover in the following lessons. onclick= “Joomla.checkAll(this)” event is a call to Joomla javascript related code to check or uncheck the checkboxes, and this function is already written in Joomla javascript code, so you don’t 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 corresponding 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 occurring 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.

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

From lines 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 the 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() method is a JPagination class method that 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