Satır seçildiğinde özel düğmeyi etkinleştirme (varsayılan olarak devre dışı)

Question

Tanımlanmış iki özel düğmeyle, Şube için bir DataTable görüntüleme verisi var: Ekle ve Güncelle. Onlar Javascript bölümünün üst kısmında başlatılır

var buttons; 
var tblBranch; 

$.fn.dataTable.ext.buttons.add = { 
      className: 'button-add', 
      text: "Add Branch", 
      action: function (dt) { 
       onBtnAddClicked() 
      } 
     }; 

$.fn.dataTable.ext.buttons.update = { 
      className: 'button-update', 
      text: "Update", 
      action: function (dt) { 
       onBtnUpdateClicked() 
      } 
     }; 

ben sayfa yüklemesinde Düzenle düğmesini devre dışı bırakmak ve sadece bir satır seçildiğinde tıklanabilir olmasını sağlamak istiyorum. Sorun şu ki, özel düğmeler kullanıyorum ve datatables.net'de koşullara bağlı olarak bunları nasıl etkinleştirme/devre dışı bırakma konusunda hiçbir şey bulamıyorum. Bugüne kadar ne denedim şudur:

tblBranch = $("#tblBranches").DataTable({ 
     dom: 'Blfrtip', 
     buttons: { 
      buttons :[ 
       'add', 'update' 
      ] 
     } 
     select: true; 
}) 

$("#tblBranches tbody").on('click', 'tr', function() { 
     if (tblBranch.row(this).hasClass('selected')) { 
      $('button-update').removeClass("DTTT_disabled"); 
     } 
     else { 
      table.$('tr.selected').removeClass('selected'); 
      $('button-update').addClass("DTTT_disabled"); 
     } 
}); 

Ama sayfa yüklendiğinde gibi olmalı, kodun Düzenle düğmesini devre dışı bırakmak için bilmiyorum, ben baktım here, here, here ve here.

Yönergeler için teşekkürler.

Answer 1

Aradığınız bağlantıyı tutmak için başvurduğunuz son bağlantı. Ama belgeler biraz belirsiz, katı bir örneğe ihtiyaç olduğunu tahmin et. Düğmeleri nasıl oluşturduğunuz açık değildir (her iki yöntemi de gösterirsiniz) ancak aşağıda bir satır içi örnek, yapıcı ile de çalışır.

$('#example').on('select.dt deselect.dt', function() { 
    table.buttons(['.edit']).enable(
    table.rows({ selected: true }).indexes().length === 0 ? false : true 
) 
}) 

: .edit düğmeye enabled Durumu güncellemek için Seç eklentileri select ve deselect olayları

var table = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    select: true, 
    buttons: [ 
    { 
     text: 'Edit', 
     className: 'edit', 
     enabled: false, 
     action: function (e, dt, node, config) { 
     //do something 
     } 
    }, 
    { 
     text: 'Add', 
     action: function (e, dt, node, config) { 
     //do something 
     } 
    } 
    ] 
}) 

Ardından kullanın: Basitçe .edit gibi, düğmeye bir sınıf vermek ve baştan sakat olarak ayarlayın

demo ->https://jsfiddle.net/pmee6w2L/