Her bir DataTable satırı için düzenleme düğmesi, veri iletilemiyor

Question

Üç sütun içeren bir DataTable adlı DataTable'ım var: Ad, Kod ve E-posta (kullanıcılara gizlenen bir ID sütunu ile birlikte). Başlangıçta üst kısmında bir Düzenleme düğmesi vardır ve bir satır üzerine tıkladıktan sonra kullanıcı tıklatılan alanları içeren bir iletişim kutusu açmak için düğmeyi tıklayabilir ve düzenleyebilir. Ancak şimdi, her satırın kendi Düzenleme düğmesine sahip olması için onu değiştirmem gerekiyor, bu nedenle önce satırın üzerine tıklanma ihtiyacını ortadan kaldırıyor.

Artık DataTable'ta her satır için bir Düzenleme düğmem var, ancak bu satırın verisini Dizin numarası dışında geçiremiyorum.

var txtName2 = $("#txtName2"); //For Update 
var txtCode2 = $("#txtCode2"); 
var txtEmail2 = $("#txtEmail2"); 
var dialog; 
var tblBranch = $("#tblBranches"); 
var branchList; 
var selectedIndex; 

branchList = response.branches; 
var data = { "aaData": [] }; 

    $.each(response.branches, function (i, item) { 
     data.aaData.push({ 
      "id": item.id, 
      "name": item.name, 
      "code": item.code, 
      "email": item.email, 
      "action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ")'</button>" 
     }); 
    }); 

function testUpdateButton(index, name, code, email) { 
    //alert(index); 
    selectedIndex = tblBranch.row(this).index(); 
    var selectedName = tblBranch.row(index).name; 
    var selectedCode = tblBranch.row(index).code; 
    var selectedEmail = tblBranch.row(index).email; 
    //alert(name); 
    onBtnUpdateClicked(index, name, code, email); 
    } 

function onBtnUpdateClicked(index, name, code, email) { 
    if (branchList != null && branchList.length > 0) { 
     var selectedItem = branchList[selectedIndex]; 
     txtName2.val(selectedItem.name); 
     txtCode2.val(selectedItem.code); 
     txtEmail2.val(selectedItem.email); 
     dialog = $("#dialog-form-update").dialog("open"); 
     } 
    } 

Ben sadece endeks numarası 'i' butonuna değil adı, kod veya e-posta adresinden geçirdiğinizde: kodun ilgili blokları (bir şey kaçırmış sürece varsa, lütfen bana) aşağıdaki gibidir TestUpdateButton altındaki uyarı (index), seçili satırın doğru indeks sayısını gösterir, dolayısıyla indeks numarasını alabilir, ancak diğer üç sütunu (uyarı (isim)) hiçbir şey göstermez.

Yani böyle böyle düğmesine dört alanları geçen denedim:

"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ", " + item.name + ", " + item.code + ", " + item.email + ")'</button>" 

ancak yalnızca bana bir hata veriyor: "Yakalanmayan SyntaxError: Eksik) argüman listesinden sonra" Ben sayfayı incelemek zaman Krom. Eksik desteğin nerede olduğunu göremiyorum.

Temel olarak, dizin numarasını alabilirim ancak ilgili adı, kodu ve e-postayı almak için kullanamıyorum.

Referans olarak, burada daha önce sahip olduğum bir çözüm için en yakın olan işlev budur - bu, tüm satır verisini geçirir ve Düzenleme iletişim kutusunu, satırın herhangi bir yerine tıkladığım her zaman girilen girdi alanları ile yükler. Sadece onBtnUpdateClicked işlevini eklemiş olmama rağmen, önceki "Tıklamada ilk tıklama" sürümünden değiştirildi. İdeal değil, ama en azından ne gerekiyorsa yaptı.

$("#tblBranches tbody").on('click', 'tr', function() { 
    selectedIndex = tblBranch.row(this).index(); 
    onBtnUpdateClicked(); 
}); 

Herhangi bir yardım çok takdir edilmektedir.

Answer 1

Satır dizinini alabildiğiniz için, diğer değerleri almak için bunu kullanabilirsiniz. Bu değerleri elde etmek için bu

function testUpdateButton(index){ 
      //alert(index); 
     selectedIndex = index; 
     var name=$("table tr").eq(index).children('td').eq(1).text(); 
     var email=$("table tr").eq(index).children('td').eq(2).text(); 
     alert(name); 
     alert(email); 
     onBtnUpdateClicked(index, name, email); 
} 

bir woorking keman gibi bir şey deneyin https://jsfiddle.net/shoaibakhter/atpgdofh/19/ olduğunu. Bu tam bir çözüm değildir, ancak evet, onBtnUpdateClicked işlevinde geçirebileceğiniz diğer değerleri almanıza yardımcı olacaktır. Eğer tablo yapısına göre ve işlevleri değiştirmek zorunda senin onBtnUpdateClicked bu size yardımcı olacaktır Umut

function onBtnUpdateClicked(index, name, email) { 
    if (branchList != null && branchList.length > 0) { 
     var selectedItem = branchList[index]; 
     txtName2.val(name); 
     txtEmail2.val(email); 
     dialog = $("#dialog-form-update").dialog("open"); 
     } 
    } 

aşağıda- olarak bu değerleri kullanır.