[英]Show and hide column in a table using drop down
I have a table, which looks exactly like this one: https://www.datatables.net/examples/api/show_hide.html我有一张表,看起来和这个一模一样: https : //www.datatables.net/examples/api/show_hide.html
I now want to replace the headers ( the th things ) with a drop down.我现在想用下拉替换标题( th 东西)。 I want to hide and show columns thanks to those drop downs (they can click and show what they want).
由于这些下拉菜单,我想隐藏和显示列(他们可以单击并显示他们想要的内容)。
I was also wondering if I can leave some columns by default.我还想知道是否可以默认保留一些列。 Is all of that possible ?
这一切有可能吗?
This is definitely possible, but have you started developing anything?这绝对是可能的,但是你开始开发什么了吗? Do you have any code for us to work with?
你有任何代码供我们使用吗? I can point you at a couple good sources to get you started if not.
如果没有,我可以为您指出几个好的来源,以帮助您入门。
First off, here is how to add a select menu to a column:首先,这是向列添加选择菜单的方法:
<th>Date
<select id="filter_dt" class="headerFilter">
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</th>
The above code will provide a drop down for columns.上面的代码将为列提供下拉列表。
You could show/hide columns by doing the following (from DOCs ):您可以通过执行以下操作来显示/隐藏列(来自DOCs ):
$('.headerFilter').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());
});
As far as a default column, it depends on how you're rendering the data in the table, but you should be able to accomplish this by simply doing the following (Directly from the DOCs ):至于默认列,它取决于您如何呈现表中的数据,但您应该能够通过简单地执行以下操作(直接来自DOC )来完成此操作:
$('#example').DataTable( {
ajax: "../php/staff.php",
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
{
data: null,
defaultContent: '<a href="#" class="remove">Delete</a>',
orderable: false
},
]
});
The last column specified in the <a href="#" class="remove">Delete</a>
value. <a href="#" class="remove">Delete</a>
值中指定的最后一列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.