使用引導程序圖標排序CakePHP表格

我想在點擊它時按id排序表格。它正在工作，但最主要的是引導程序箭頭向上和向下圖標也應該附加到id標籤。使用引導程序圖標排序CakePHP表格

當數據以降序顯示時，則應顯示引導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>

來源

2013-08-17 DR Jerry

請總是提到你正在使用的精確CakePHP的版本！ – ndm

使用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-17 11:05:01 ndm

一使用jQuery簡單的解決方案，只需添加下面3條線在默認的application.js或佈局/ default.thtml中

$('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-28 10:41:53

簡單的基於CSS的解決方案很有幫助。 –

您也需要檢查的關鍵，所以這將是

<?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-15 11:13:58

使用引導程序圖標排序CakePHP表格

回答

相關問題