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