데이터베이스에서 생성 된 테이블 필터링

데이터베이스에서 공지 사항 테이블을 만들었습니다.데이터베이스에서 생성 된 테이블 필터링

데이터베이스의 '유형'열을 기준으로이 표를 카테고리로 필터링하려고합니다.

데이터베이스 테이블에는 공지의 '유형'을 보유하는 열이 있습니다. 유형에 따라 각 공지 사항을 표시하는 테이블 상단에 탭이 있어야합니다.

예 : 회의 탭에는 회의 유형의 모든 공지 사항이 표시되어야합니다. 예측 탭에는 예측 유형의 모든 공지 사항이 포함되어야합니다.

저는 Javascript 또는 Jquery에 대한 경험이 거의 없으며, 내가 어딘지에 가까운 솔루션을 찾을 수 없습니다. 드롭 다운 필터 또는 검색 상자를 원하지 않습니다.

HTML의 show.html.erb

<section id="announcements"> 
<h2>Recent Announcements</h2> 
    <ul id="filter"> 
    <li class="current"><a href="#">All</a></li>  
    <li><a href="#">Meeting</a></li> 
    <li><a href="#">Forcast</a></li> 
    </ul> 
<%= render "markets/announcements/table" %>

HTML의 _table.html.erb

<% announcements ||= @announcements %> 
<% title ||= nil %> 

<section id="announcements" class="screen table-screen"> 
    <% if title %> 
    <h2><%= title %></h2> 
    <% end %> 
    <table> 
    <thead> 
     <tr> 
     <th>Title</th> 
     <th class="sort-column">Date</th> 
     <th>Type</th> 
     </tr> 
    </thead> 
    <tbody> 
     <%= render :partial => "markets/announcements/announcement", :collection => announcements, :as => :announcement, :locals => { :display_instrument_code => display_instrument_code } %> 
    </tbody> 
    </table> 
</section>

HTML의 _announcement.html.erb

<tr> 
    <td><%= link_to(announcement.title.truncate(50), path_for_announcements(announcement)) %></td> 
    <td class="date-cell"><%= format_time(announcement.time, :format => :announcement) %></td> 
    <td class="announcement_type"><%= announcement.type %></td> 
</tr>

내 현재 자바 스크립트와 CSS . '모두'라고 표시되지만 다른 탭은 필터링하지 않습니다.

자바 스크립트

$(document).ready(function() { 
    $('ul#filter a').click(function() { 
     $(this).css('outline','none'); 
     $('ul#filter .current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

     if(filterVal == 'all') { 
      $('table#announcement_table tr.hidden').fadeIn('slow').removeClass('hidden'); 
     } else { 
      $('table#announcement_table tr').each(function() { 
       if(!$(this).hasClass(filterVal)) { 
        $(this).fadeOut('normal').addClass('hidden'); 
       } else { 
        $(this).fadeIn('slow').removeClass('hidden'); 
       } 
      }); 
     } 

     return false; 
    }); 
});

CSS 모든 도움에 미리

ul#filter { 
    float: left; 
    font-size: 16px; 
    list-style: none; 
    margin-left: 0; 
    width: 100%; 
} 
ul#filter li { 
    border-right: 1px solid #dedede; 
    float: left; 
    line-height: 16px; 
    margin-right: 10px; 
    padding-right: 10px; 
} 
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; } 
ul#filter a { color: #999; text-decoration: none; } 
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; } 
ul#filter li.current a { color: #333; font-weight: bold; }

감사합니다.

출처

2013-06-07 JordanC

오, 사람, 당신은 쉽게 그리고 datatables jquery 플러그인을 사용하십시오!

지침에 따라 jquery-datatables-rails 보석을 사용하십시오. 아약스 로딩 페이지 매김 기능은 체크 아웃 사용에 대한 좋은 자습서

라이언 베이츠 '우수

screencast 그냥 당신이 ...이 플러그인 작업으로 원하는 테이블을 생성하는 것이 얼마나 쉬운의 맛을 제공합니다 트위터 부트 스트랩을 만들 것입니다 위의 코드는 타 스타일

var oTable = $('#your_tables_id').dataTable({ 
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap", 
    "aaSorting": [[ 5, "asc" ]] 
});

: <thead> 및 <tbody>

을 포함하여 적절한 태그 그런 다음 스크립트에서 이런 식으로 뭔가를 넣어 5 번째 열이 기본 정렬 인 오름차순으로 표시됩니다.

출처

2013-06-07 04:42:20 Abram

데이터베이스에서 생성 된 테이블 필터링

답변

관련 문제