问题描述
我正在用数据表填充一个表。该表始终有四列。但是我需要添加另一列,该列可以根据布尔值显示或隐藏。 到目前为止我的代码:
{% show_extra_fields_button = show_extra_fields_bool %}
<table class="display" id="fields_datatable" class="fields_datatable">
<thead>
<tr>
<th>Name</th>
<th>Place</th>
<th>Email</th>
<th>Phone</th>
<th>Add Extra</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="/static/js/vendor/datatables.min.js"></script>
<script>
$(document).ready(function() {
$("#fields_datatable").dataTable({
ajax: {
"processing": true,"dataSrc": "",url: 'app/personFields/',},"columns": [
{ "data": "name" },{ "data": "place" },{ "data": "email" },{ "data": "phone" },]
})
if (show_extra_fields_button) {
$("#fields_datatable tr").each(function(){
$(this).append("<td><button>Add Extra</button</td>");
});
}
});
</script>
在这里我想根据布尔值显示 Add Extra
列。我希望标题和列值将是使用 js 添加的按钮。
我该怎么做?
解决方法
您可以使用数据表的内置功能。
要添加按钮列,您可以使用以下列定义:
{
"data": null,"name": "buttonColumn","render": function (data,type,row) {
return '<button>Add Extra</button>';
}
}
然后使用 initComplete 回调在表完全初始化、数据加载和绘制后设置列的可见性:
$("#fields_datatable").dataTable({
ajax: {
type: "GET",contentType: "application/json; charset=utf-8",url: 'app/personFields/',},"columns": [
{ "data": "name" },{ "data": "place" },{ "data": "email" },{ "data": "phone" },{
"data": null,row) {
return '<button>Add Extra</button>';
}
}
],"initComplete": function (settings,json) {
// get instance of datatable
table = settings.oInstance.api();
// get column using its name and set visibility
table.column('buttonColumn:name').visible(show_extra_fields_button);
}
});
,
您可以输入 -
而不是删除那个 <td>
例如 <td>-</td>
您可以像添加到表格正文一样添加到表格标题中。
if (show_extra_fields_button) {
$('#fields_datatable thead tr').append('<th>Add Extra</th>')
}
只执行一次。