Adding sortable columns to a joomla component

Most of the joomla components have listing of data. And some of them dont have a sorting option in the listing. This tutorial explains that how to add a sortable column in a joomla component. To explain this we are taking the component 'com_profiler'.

The joomla the component 'com_profiler' is very helpful in profile making. It has a user listing in the administrator side. It lists the users list with name, username, groups, email etc. But this section doesnt have a sorting field. Usually you cant sort any fields in 'com_profiler' user list. This section explains how to add a sorting field in the admin section of comprofiler. Now we are going to change the username field in to a 'sorting' field.

Usually the user listing is generated by the comprofiler html page and comprofiler controller page. Path for these pages are as follows.

administrator/components/com_comprofiler/admin.comprofiler.html.php

administrator/components/com_comprofiler/admin.comprofiler.controller.php

Step 1 : Modify the admin.comprofiler.html.php

In admin.comprofiler.html.php there is a function named 'showUsers'. This function generates the list of users. In the showuser function we will add the 'ordering' code

global $mainframe;

$filter_order = $mainframe->getUserStateFromRequest( $option.'filter_order', 'filter_order', 'u.username', 'cmd' );

$filter_order_Dir = $mainframe->getUserStateFromRequest( $option.'filter_order_Dir', 'filter_order_Dir', 'asc','word' );
$lists1['order_Dir'] = $filter_order_Dir;

$lists1['order'] = $filter_order;

So the page will look like as

function showUsers( &$rows, &$pageNav, $search, $option, &$lists, &$pluginColumns ) {

HTML_comprofiler::secureAboveForm('showUsers');

// table ordering

global $mainframe;

$filter_order = $mainframe->getUserStateFromRequest( $option.'filter_order', 'filter_order', 'u.username', 'cmd' );

$filter_order_Dir = $mainframe->getUserStateFromRequest( $option.'filter_order_Dir', 'filter_order_Dir', 'u.username','word' );
$lists1['order_Dir'] = $filter_order_Dir;

$lists1['order'] = $filter_order;

outputCbTemplate( 2 );

outputCbJs( 2 );

Step 2 : Setting the Order Link

After that we can set the sorting link to the username field. Place the following code instead of the 'Usernmae' Title.

<?php echo JHTML::_( 'grid.sort', 'UserName', 'u.username', $lists1['order_Dir'], $lists1['order']); ?>

So the code will look like as follows.

<th width="15%" class="title"><?php echo CBTxt::T('Name'); ?></th>

<th width="10%" class="title">

<?php echo JHTML::_( 'grid.sort', 'UserName', 'u.username', $lists1['order_Dir'], $lists1['order']); ?></th>

<th width="5%" class="title" nowrap="nowrap"><?php echo CBTxt::T('Logged In'); ?></th>

Step 3 : Add the Hidden Fields

Also add the hidden fields to post the sorting field and sorting direction to the controller page. Add the following code before the end of the form

<input type="hidden" name="filter_order" value="<?php echo $lists1['order']; ?>" />

<input type="hidden" name="filter_order_Dir" value="<?php echo $lists1['order_Dir']; ?>" />

now the code will look like as follows.

<input type="hidden" name="option" value="<?php echo $option;?>" />

<input type="hidden" name="task" value="showusers" />

<input type="hidden" name="boxchecked" value="0" />

<input type="hidden" name="filter_order" value="<?php echo $lists1['order']; ?>" />

<input type="hidden" name="filter_order_Dir" value="<?php echo $lists1['order_Dir']; ?>" />
<?php

echo cbGetSpoofInputTag( 'user' );

?>

</form>

Step 4 : Modify the controller code (admin.comprofiler.controller.php)

The controller grabs the data from the database.

So we need to modify the function to list based on the order.

The controller contains a function named 'showUsers'.Edit the function to get the post values submitted from the listng page. Use the post method to assign the values. After placing the code the function will look like as

function showUsers( $option ) {

global $_CB_database, $_CB_framework, $_POST, $_PLUGINS, $_CB_TxtIntStore;

if(isset($_POST['filter_order']))

     $filter_order = $_POST['filter_order'];

else

     $filter_order = "u.username";



if(isset($_POST['filter_order_Dir']))

      $filter_order_Dir = $_POST['filter_order_Dir'];

else

     $filter_order_Dir = "asc";

Also modify the search query to get the ordered data.Add the ' ORDER BY' clause in the search query. After adding the ' ORDER BY ' clause the code will look like as the follow.

$query = "SELECT DISTINCT u.*, g.name AS groupname, ue.approved, ue.confirmed"

. $queryFrom

. " ORDER BY $filter_order $filter_order_Dir "

. "\n LIMIT " . (int) $pageNav->limitstart . ", " . (int) $pageNav->limit

;

That's all. Now in the user listing of the admin panel we have the 'user name ' filed as link. Now we can list the data's either in ascending order or by descending order.