Datae表动态显示/隐藏列在Rails中不起作用

时间:2015-03-15 07:39:56

标签: javascript jquery html ruby-on-rails jquery-datatables

我正在尝试使用dataTable插件在rails中动态显示隐藏列。

显示“隐藏”按钮是可见的,但是当我取消选中某列时,它不会从表中消失。只有当我点击复选标记为true时,该列才会出现,如果我取消选中它,它应该不在列列表中。

请帮我解决这个问题!。

_merchent.html.erb #partail file

<div id="merchant_list" class="panel-body">
    <div  class="table-success">
      <table id = "table_id" class="table table-bordered">
        <thead>
        <tr>
          <th>Merchant</th>
          <th>Bank Name</th>
          <th>Payment Gateway</th>
          <th>Status</th>
          <th>Amount</th>
          <th>Discount</th>
          <th>Additional Charges</th>
          <th>Added On</th>
        </tr>
        </thead>
        <tbody id="details">
        <% @all_settlement_details.each do |sd| %>
            <tr>
              <td><%= sd.merchantname %></td>
              <td><%= sd.bank_name  %></td>
              <td><%= sd.payment_gateway %></td>
              <td><%= get_status(sd.status) %></td>
              <td><%= sd.amount %></td>
              <td><%= sd.discount %></td>
              <td><%= sd.additional_charges%></td>
              <td><%= get_added_on_date sd.addedon %></td>
            </tr>
        <% end %>
        </tbody>
      </table>
      <div id="align">
        <a href="" class="load-more" data-clicks="1">Load more...</a>
      </div>
    </div>
  </div>
</div>

merchant.js文件

$(document).ready(function(){

$('#table_id').DataTable({
   "dom": 'C&gt;"clear"&lt;lfrtip',
   paging: false,
   searching: false
});

请同时查看相应的图片。

enter image description here

2 个答案:

答案 0 :(得分:0)

你看过http://www.datatables.net/examples/api/show_hide.html吗?

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

我们需要查看附加到复选框的代码,以进一步了解您的问题。

答案 1 :(得分:0)

几个小时后,我终于找到了解决方案。 一切都很好,但我包含的数据库库已过时。所以我改变了这两个库。现在它正在发挥作用。

http://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css

http://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js