0

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

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

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

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

我在 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; }

提前感谢您的所有帮助。

4

1 回答 1

0

哦，伙计，放轻松，使用datatables jquery 插件！

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

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

只是为了让您体验使用这个插件是多么容易......使用适当的标签生成您想要的表格，包括<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 样式表，其中第五列是默认的升序排序。

于 2013-06-07T04:42:20.640 回答