Question

我有一个从数据库创建的公告表。

我正在尝试根据数据库的“类型”列将此表过滤为类别。

数据库表有一列保存公告的“类型”。我想在表格顶部显示标签，根据类型显示每个公告。

例如，会议选项卡应显示类型会议的所有公告。 “预测”选项卡应包含预测类型的所有公告。

我几乎没有任何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>

以下是我目前的Javascript和CSS。它显示“全部”正常，但不会过滤其他标签。

的Javascript

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

提前感谢您的帮助。

Answer 1

哦，伙计，请自己动手并使用datatables jquery插件！

按照说明使用jquery-datatables-rails gem。

有关使用ajax加载分页功能的精彩教程，请查看Ryan Bates的优秀screencast

只是为了让您了解使用此插件是多么容易...使用适当的标记生成您想要的表格，包括<thead>和<tbody>

然后在你的剧本中加入这样的东西：

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" ]]
});

上面的代码将创建一个twitter bootstrap样式表，第五列是按升序排列的默认排序。

过滤从数据库创建的表

1 个答案: