1

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

当数据按降序显示时，arrow-bottom应显示引导图标，当数据按升序显示时，arrow-up应显示图标。

用户控制器.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>
4

3 回答 3

9

使用 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;
}
于 2013-08-28T10:41:53.777 回答
2

您还需要检查一个密钥，所以它会是

<?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; ?>
于 2014-09-15T11:13:58.033 回答
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>
于 2013-08-17T11:05:01.960 回答