jQuery DataTables 列 Show/Hide 使用 Bootstrap 模式切换

Question

我有一个 table，我正在使用 jQuery 数据 table。我想在我的 table 中选择 show/hide 列，我看到了这个：https://datatables.net/examples/api/show_hide.html
在此示例中，它是通过单击 link 来切换列的 show/hide 来完成的。但是我想要做的是有一个模式，其中包含列名和复选框，无论是选中还是未选中，在提交时，我的 table 列应该根据来自的 checked/unchecked 列名进行更新模态。如何做到这一点？

Answer 1

您需要使用相同的代码。您将拥有复选框，而不是锚标记。

<input type="checkbox" class="toggle-vis" data-column="0" value="Name"/>Name

并且您的 jQuery 事件选择器将会改变。

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

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

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

here 是 Name 列的有效 fiddle。您可以将这些复选框放在您的模式中 window.

jQuery DataTables 列 Show/Hide 使用 Bootstrap 模式切换

jQuery DataTables Column Show/Hide Toggle using Bootstrap Modal

asp.net-mvc

datatable

jquery

twitter-bootstrap