부트 스트랩 아이콘으로 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>

을

는 정렬 링크로이 포함 PaginatorHelper::sort()에 두 번째 매개 변수로 HTML을 전달하고 false로 escape 옵션을 설정하려면 :

$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를 사용하여 간단한 해결 방법은, 그냥

$('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/default.ctp

기본 application.js 또는 레이아웃에 3 개 라인 아래를 추가 글꼴 썸네일의 필수 파일을 포함하십시오.

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 테이블 정렬

답변

관련 문제