Adding Ordering of Items in Back-end

Joomla allow the administrator to define ordering of items by clicking on the ordering symbol (a little up arrowhead above a down arrowhead) at the top left of the items table, and then clicking on one of the three vertical dots symbols and sliding the record up or down to reorder.

Joomla uses the JQuery UI Sortable library to implement the dragging and dropping associated with reordering the records.

You can use the order defined by the administrator to output the items on the front end.

You have to store the ordering in the database in the column called "ordering". Then, you have to do the following:

• Include the ordering field in the query.
• Including the ordering field in the filter fields, to sort the table using that field.
• Display the ordering column in the layout file, and setting up the data to enable the dynamic reordering functionality (sliding the record up or down to reorder).

We also have to consider what the ordering field should be set to whenever new records are created. You can set the value of ordering in the model file within a function prepareTable($table) which Joomla calls prior to saving the record in the database.

Step 1: Database Field

You can define the ordering filed as"

`ordering` int(11),

Step 2: Model File for List

In the model, you need to include the ordering field in the database select. Also, include the ordering field in the filter fields.

Step 3: Layout File

The Joomla JHtml::_('sortablelist.sortable', ...) function is used to provide ordering functionality. You need to provide following details:

1. Set of records in which ordering takes place. For this, pass the id of the table element as a parameter within JHtml::_('sortablelist.sortable', ...)

<table class="table table-striped table-hover" id="helloworldList">

2. Subset of records for which the order can be interchanged. This is specified by the sortable-group-id attribute on the table row <tr>. Rows are interchangeable if they have the same value of this attribute. This is used when items are organised in different categories.

<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo $row->catid; ?>">
<td><?php
 $iconClass = '';
 if (!$saveOrder)
 {
 $iconClass = ' inactive tip-top hasTooltip" title="' . JHtml::_('tooltipText', 'JORDERINGDISABLED');
 }
 ?>
 <span class="sortable-handler<?php echo $iconClass ?>">
 <span class="icon-menu" aria-hidden="true"></span>
 </span>
 <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $row->ordering; ?>" class="width-20 text-area-order" />
 </td>
<tr>

When items are not organised in different categories, you can remove class and sortable-group-id attributes from tr tag.

3. The icon which initiates the dragging for reordering. This is through applying the CSS class sortable-handler to the element containing the icon of the three vertical dots.

4. The URL to call (via Ajax) to store a reordering of the records on the server. It is passed as a parameter to JHtml::_('sortablelist.sortable', ...). This function is saveOrderAjax() within the Admin Controller.

$saveOrder = $listOrder == 'ordering';
if ($saveOrder)
{
 $saveOrderingUrl = 'index.php?option=com_helloworld&task=helloworlds.saveOrderAjax&tmpl=component';
 JHtml::_('sortablelist.sortable', 'helloworldList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);
}

5. For the table heading:

<th width="1%">
 <?php echo JHtml::_('searchtools.sort', '', 'ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-menu-2'); ?>
 </th>

Or this:

<?php echo JHtml::_('grid.sort', 'COM_HELLOWORLD_ORDERING', 'ordering', $listDirn, $listOrder); ?>

6. There's also a hidden input field, with name = "order[]", which the javascript uses to pass the new ordering to the server in the Ajax call.

Step 4: Model File for Form

Here, you can set the ordering value of the new record to be the max + 1, so that it appears at the end.

/**
 * Prepare a helloworld record for saving in the database
 */
 protected function prepareTable($table)
 {
 // Set ordering to the last item if not set
 if (empty($table->ordering))
 {
 $db = $this->getDbo();
 $query = $db->getQuery(true)
 ->select('MAX(ordering)')
 ->from('#__helloworld');

$db->setQuery($query);
 $max = $db->loadResult();

$table->ordering = $max + 1;
 }
 }