数据表动态显示/隐藏列在 Rails 中不起作用答案

【问题标题】：Datae Tables Dynamically show/hide columns is not working in Rails数据表动态显示/隐藏列在 Rails 中不起作用
【发布时间】：2015-03-15 07:39:56
【问题描述】：

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

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

请帮我解决这个问题！

_merchent.html.erb #parttail 文件

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

请同时查看相应的图片。

【问题讨论】：

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

【解决方案1】：

你看过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() );
    } );
} );

我们需要查看附加到复选框的代码，以进一步了解您的问题可能是什么。

【讨论】：

【解决方案2】：

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

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

【讨论】：