如果某些条件，隐藏数据表的按钮

Question

我正在使用数据表，并且列的末尾有用于操作按钮编辑/删除按钮的操作列。以下是我目前使用的脚本。

$(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();


            } );

我想做的是如果 data[3] = "Edited" 那么按钮编辑/删除将不会出现..基本上我的 data[3] 是每行数据的状态。我想隐藏/显示编辑/删除按钮是基于每行的状态。

Answer 1

把这个放在你的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 '';

      }
},