CakePHP表排序与引导程序图标

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

指数.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;
}

Answer 2

使用PaginatorHelper::sortDir()检查当前排序方向，并根据该值构建类名：

<i class='icon-arrow-<?php echo $this->Paginator->sortDir() === 'asc' ? 'up' : 'down'; ?>'></i>

要将其嵌入到排序链接中，请将HTML作为第二个参数传递给PaginatorHelper::sort()，并将escape选项设置为false：

$type = $this->Paginator->sortDir() === 'asc' ? 'up' : 'down';
$icon = "<i class='icon-arrow-" . $type . "'></i>";
echo $this->Paginator->sort('id', $icon, array('escape' => false));

这应该会产生一个链接，比如：

<a href="/.../page:1/sort:id/direction:asc/"><i class='icon-arrow-up'></i></a>

Answer 3

您还需要检查一个密钥，因此它将是

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