CakePHP表排序与bootstrap图标

Question

我想id在点击它时对表格进行排序.它正在工作,但主要的是引导箭头上下图标也应该附加到id标签上.

当数据以降序显示时,arrow-bottom应显示引导程序图标,当数据按升序显示时,arrow-up应显示图标.

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']); ?>&nbsp;</td>
    <td><?php echo h($user['User']['first_name']); ?>&nbsp;</td>
    <td><?php echo h($user['User']['last_name']); ?>&nbsp;</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

使用Jquery的简单解决方案,只需在默认的application.js或layout/default.ctp中添加以下3行

$('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');

另一个简单的基于CSS的解决方案,包括Font Awesome的必要文件.

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;
}