首页 > 解决方案 > 如果某些条件,隐藏数据表的按钮

问题描述

我使用数据表和列的末尾有操作列,用于操作按钮编辑/删除按钮。下面是我目前使用的脚本。

$(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]是每行数据的状态。我想隐藏/显示编辑/删除按钮是基于每行的状态。

标签: javascriptphpjqueryhtmldatatable

解决方案


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

      }
},

推荐阅读