button.disable() isn't working like it should

pcsintjanbaptist

Hi,

I have this code

<script type="text/javascript" language="javascript" class="init">
/*
**************************datatables begroting fd*****************************
*/
var editor; // use a global for the submit and return data rendering in the examples
//ophalen artikelen
editor = new $.fn.dataTable.Editor( {
ajax: "datatables/begrotingAfdelingFD.php?afdeling="+<?php echo $_GET['afdelingid'];?>,
table: "#begrotingFD",
fields: [
          {
            label: "Artikel: ",
            name: "artikel",
          },
          {
            label: "Opmerking: ",
            name: "opmerking",
          },
          {
            label: "Opmerking keuring",
            name: "commentaarBijUitvoering",
            type: "readonly",
          },
          {
            label: "Begrotingsjaar",
            name: "begrotingsjaar",
          }
        ]
} );

$(document).ready(function() {

  //aanmaken editor
var tableFD= $('#begrotingFD').DataTable( {
      dom : 'Bflrtip',
      ajax: "datatables/begrotingAfdelingFD.php?afdeling="+<?php echo $_GET['afdelingid'];?>,
      columns: [
        { data: "artikel" },
        { data: "goedgekeurd" },
        { data: "opmerking" },
        { data: "commentaarBijUitvoering" },
        { data: "begrotingsjaar" }
      ],
      order: [ 1, 'asc' ],
      select: {
        style:    'os',
        selector: 'td:first-child'
      },
      rowCallback: function ( row, data ) {
          if(data.goedgekeurd==0){
            $('td:eq(1)', row).html('goedgekeurd <input type="radio" class="editor-active" id="goedgekeurdFD"/> </br> afgekeurd <input type="radio" class="editor-active" id="afgekeurdFD" checked/>');
          }else if (data.goedgekeurd==1){
            $('td:eq(1)', row).html('goedgekeurd <input type="radio" class="editor-active" id="goedgekeurdFD" checked/> </br> afgekeurd <input type="radio" class="editor-active" id="afgekeurdFD"/>');
          }else{
            $('td:eq(1)', row).html('goedgekeurd <input type="radio" class="editor-active" id="goedgekeurdFD" />  </br> afgekeurd <input type="radio" class="editor-active" id="afgekeurdFD"/>');
          }

      },
      buttons: [
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
      ]
      }
   );
   $('#begrotingFD tbody').on( 'click', 'tr', function () {
     var status = tableFD.row(this).data().goedgekeurd;

     if(status == 1 || status == 0){
       
       tableFD.button(0).disable();
       tableFD.button(1).disable();
     }else{
       tableFD.button(0).enable();
       tableFD.button(1).enable();
     }
   });
});

and I want to disable the edit and delete button(0) and button(1) but it won't work.
Sometimes I have to double or triple click to disable it.
Can someone help me?

Kind regards
Nevk

bindrid

I usually do it like this:

   $('#begrotingFD tbody').on( 'click', 'td', function () {
        var $tr = $(this).closest('tr');
     var status = tableFD.row($tr).data().goedgekeurd;
 
     if(status == 1 || status == 0){
        
       tableFD.button(0).disable();
       tableFD.button(1).disable();
     }else{
       tableFD.button(0).enable();
       tableFD.button(1).enable();
     }
   });

allan

The problem you will be having is that the Editor edit and remove buttons are based on the selected button type. If a row is selected the buttons are enabled. If there are no rows selected then they are disabled.

What you are seeing is a conflict between that functionality and your own calls to the button().enable() and button().disable() method.

The way to address this is to not use the Editor provided buttons since they don't do what you want, but rather to create a custom button that will do what you want. That custom button can be enabled or disabled as needed, and its action method would call edit() or remove() as required.

Regards,
Allan

pcsintjanbaptist

I fixed it by hiding my edit buttons with jquery, I think that is easyer then making my own buttons and then hide them with the button.disable() method

Thanks for the help.

  /*disablen als gekeurd*/
      $('#begrotingICT tbody').on( 'click', 'tr', function () {
        var status = tableICT.row(this).data().goedgekeurd;

        if(status == 1 || status == 0){
          $("#begrotingICT_wrapper").find(".dt-buttons").hide();
        }else{
         $('.dt-buttons').show();
        }
      });

allan

Great to hear you've got it working.

The goal of the Buttons library is to make creating custom buttons approachable. That was something that I set out to do at the outset and to the end all you need to do is define a label and an action function for the button. It would probably be slightly less code than the above - for example:

action: function ( e, dt, node, config ) {
  var that = this;

  dt.on( 'select deselect', function () {
    // add any logic required to see if any row that is selected should show editable or not
    // ...
    that.enable( dt.rows({selected:true}).any() );
  } );
}

But there are many ways to do this sort of thing! As with everything

Allan