使用模态引导jQuery的数据表列显示/隐藏切换 [英] jQuery DataTables Column Show/Hide Toggle using Bootstrap Modal

问题描述

我有一个表，我使用jQuery的数据表。我想有一个选项，以显示/隐藏在我的表中的列（S），我看到这个： https://datatables.net/examples/api/show_hide.html

在这个例子中，它是通过点击链接来切换列的显示/隐藏完成。但我想要做的是与每个是选中或取消选中时，提交后，我的表列应根据从模式的选中/取消选中列名称更新列名和复选框模态。如何做到这一点？

I have a table and I am using jQuery data tables. I wanted to have an option to show/hide a column(s) in my table and I saw this: https://datatables.net/examples/api/show_hide.html
In this example, it is done by clicking a link to toggle the show/hide of the column. But what I want to do is to have a modal with column names and checkboxes on each which is when checked or unchecked, upon submit, my table columns should be updated based on the checked/unchecked column names from the modal. How to do this?

推荐答案

您需要使用相同的code。只是代替锚标记你必须的复选框。

You need to use the same code. Just instead of anchor tags you'll have check-boxes.

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

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

And your jQuery event selector will change.

 $('.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 is a working fiddle for Name column. You can put these checkboxes in your modal window.

这篇关于使用模态引导jQuery的数据表列显示/隐藏切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！