CakePHP table sorting with bootstrap icons - cakephp

Question

I want to sort a table by id when clicking on it. It is working but the main thing is that the bootstrap arrow up and down icons should also be attached to the id label.
When the data is displayed in descending order, then the bootstrap arrow-bottom icon should be shown, and when the data is displayed in ascending order, then the arrow-up icon should be shown.
UsersController.php
public $paginate = array('limit'=>4);
public function index() {
$this->User->recursive = 0;
$this->set('users', $this->paginate());
}
index.ctp
<div class="users index">
<h2><?php echo __('Users'); ?></h2>
<table class="zebra-striped table-bordered " cellpadding="0" cellspacing="0">
<tr>
<th>
<a href='' >
<?php echo $this->Paginator->sort('id'); ?>
<i class='icon-arrow-up'></i>
</a>
</th>
<th><a href='' >First Name <i class='icon-arrow-down'></i>
</a> </th>
<th>Last Name <i class='icon-resize-full'></i></a></th>
</tr>
<?php foreach ($users as $user): ?>
<tr>
<td><?php echo h($user['User']['id']); ?> </td>
<td><?php echo h($user['User']['first_name']); ?> </td>
<td><?php echo h($user['User']['last_name']); ?> </td>
</tr>
<?php endforeach; ?>
</table>
<p>
<?php
echo $this->Paginator->counter(array(
'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
));
?> </p>
<div>
<div class="pagination">
<ul>
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'),
null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag'
=> 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>

Answer 1

A Simple Solution using Jquery, just add the below 3 lines in your default application.js or in layout/default.ctp
$('th a').append(' <i class="icon-sort"></i>');
$('th a.asc i').attr('class', 'icon-sort-down');
$('th a.desc i').attr('class', 'icon-sort-up');
Another Simple CSS Based Solution, Include Font Awesome's necessary files.
th > a:after {
content: " \f0dc";
font-family: FontAwesome;
}
th > a.asc:after {
content: " \f0dd";
font-family: FontAwesome;
}
th > a.desc:after {
content: " \f0de";
font-family: FontAwesome;
}

Answer 2

Use PaginatorHelper::sortDir() to check the current sort direction and build the class name based on that value:
<i class='icon-arrow-<?php echo $this->Paginator->sortDir() === 'asc' ? 'up' : 'down'; ?>'></i>
To embed this into a sort link, pass the HTML as the second parameter to PaginatorHelper::sort(), and set the escape option to false:
$type = $this->Paginator->sortDir() === 'asc' ? 'up' : 'down';
$icon = "<i class='icon-arrow-" . $type . "'></i>";
echo $this->Paginator->sort('id', $icon, array('escape' => false));
That should result in a link like:
<i class='icon-arrow-up'></i>

Answer 3

You need also check a key, so it would be
<?php echo $this->Paginator->sort('title', 'My great title'); ?>
<?php if ($this->Paginator->sortKey() == 'title'): ?>
<i class='fa fa-sort-<?php echo $this->Paginator->sortDir() === 'asc' ? 'up' : 'down'; ?>'></i>
<?php else: ?>
<i class='fa fa-sort'></i>
<?php endif; ?>