javascript - 如果某些条件,隐藏数据表的按钮
问题描述
我使用数据表和列的末尾有操作列,用于操作按钮编辑/删除按钮。下面是我目前使用的脚本。
$(document).ready(function() {
var dataTable = $('#demo-custom-toolbar').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"read.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".demo-custom-toolbar-error").html("");
$("#demo-custom-toolbar").append('<tbody class="demo-custom-toolbar-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#demo-custom-toolbar_processing").css("display","none");
}
},
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent":
'<button type="button" class="btn btn-success btn-xs btn-view" ><i class="glyphicon glyphicon-ok"></i></button>'
+ '<button type="button" class="btn btn-danger btn-xs btn-delete"><i class="glyphicon glyphicon-remove"></i></button>'
} ]
} );
var data = dataTable.row( $(this).parents('tr') ).data();
} );
我想做的是如果数据[3] =“已编辑”,那么按钮编辑/删除将不会出现。基本上我的数据[3]是每行数据的状态。我想隐藏/显示编辑/删除按钮是基于每行的状态。
解决方案
把这个放在你的columnDefs
,
{
targets: [-1],
visible: true,
orderable: false,
render: function(data, type, row) {
const btn = '<button type="button" class="btn btn-success btn-xs btn-view" ><i class="glyphicon glyphicon-ok"></i></button>'
+ '<button type="button" class="btn btn-danger btn-xs btn-delete"><i class="glyphicon glyphicon-remove"></i></button>';
if (data[3] !== 'Edited') {
return btn;
}
return '';
}
},
推荐阅读
- gcc - 如何编译 Linux 内核以获得预处理器的输出?
- computer-vision - cnn 使用迁移学习对低分辨率热图像进行深度学习
- colors - 如何在gnuplot中用可见光谱颜色填充矩形?
- java - RecyclerView 为适配器位置返回 null
- python-3.x - 使用 Python 3/BeautifulSoup 将“a”包含在“strong”中时从 href 中检索 URL
- python - FLASK REST API 在 POST 上返回 400
- python - 如何解决错误 pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it's not in your path
- architecture - 可以注入服务/API 客户端来聚合根吗?
- css - 如何使元素之间的间隙相等
- django - Django 检查相关对象的所有实例是否包含某个值