2016-11-10 214 views
2

我想在DataTable的頂部有一個編輯按鈕,它將從當前選定的行中選取值並將其附加到我的url。Jquery DataTable從點擊按鈕獲取的行中獲取數據

我已經設法讓它工作,但不是我會如何喜歡。

我的編輯按鈕沒有正確使用Datatable來獲取存儲在數據表中的值。

$.fn.dataTable.ext.buttons.edit = { 
    text: 'Edit', 
    action: function() { 
     var assetID; 
     $("#example tr.selected").each(function (index, row) { 
      assetID = ($(row).find("td:nth-child(2)").html()); 
     }); 
     if (assetID != null) { 
      var url = "/Demo/Edit/" + assetID; 
      window.location.href = url; 
     } 
    } 
}; 

示例來自帶有按鈕的數據表站點的表格,該按鈕會在當前所選行中發出數據。 我非常想讓我的數據更加整潔,並將它放到數據表中。

$(document).ready(function() { 
var events = $('#events'); 
var table = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    select: true, 
    buttons: [ 
     "edit", //my edit button which works but requires external script 
     { // Example button from website. 
      text: 'Get selected data', 
      action: function() { 
       var count = table.rows({ selected: true }).count(); 
       //var count = table.rows({ selected: true }).data(); 
       // how do i then drill down into count to get value from column 2. 
       events.prepend('<div>'+count+' row(s) selected</div>'); 
      } 
     } 
    ] 
}); 
}); 

我已經試了很多方法,試圖從數據表網站的例子中訪問的對象,但我不能獲得價值使用他們的方法選擇行特定的列。

任何幫助將不勝感激。

+0

是否有必要使用數據表的後端,或者你可以用數據表之外的jQuery來破解它?另外,你如何得到哪些是'選擇'的,你有一個addclass方法還是內置於DT?如果你不需要DT,你可以運行類似('.selected')。(...)的邏輯每個(...),並將它綁定到一個按鈕。 – rob

回答

0

我解決了這個前一段時間,但剛剛發現這個懸而未決這樣想我會後,如果是我的發現幫助其他人。

$.fn.dataTable.ext.buttons.edit = { 
    text: 'Edit', 
    action: function() { 
     var tableToQuery = $("#controllerTable").DataTable(); 
     var selectedRow = $("#controllerTable tr.selected"); 
      var rowdata = tableToQuery.row(selectedRow).data(); 
      var assetID = rowdata.AssetID; 
      if (assetID != null) { 
      var url = "/Demo/Edit/" + assetID; 
      window.location.href = url; 
     } 
    } 
}; 
0

我只是對我留下的評論發表先發制人的答案。如果你可以忍受這樣做,而不使用數據表創建和綁定函數,你可以用jQuery來做,並製作自己的按鈕。

唯一的是,我不知道你是如何得到'選擇'。這是數據表的一部分(我用DT很多,但從來沒有他們的行選擇的東西)?

無論哪種方式,它可能會應用一個類的行,並使用可以使用該類來選擇。

<button type="button" id="selected_action">Do It!</button> 


$('#selected_action').on('click', function(){ 
    $('selected').each(function(){ 
     parent_row = $(this).closest('tr'); 
     //use nth-child selectors on parent_row to get what you want 
     }) 
}) 

如果您呈現的數據表裏面的按鈕,但使用這個選擇:

('#dc_{{dgroup.order}}_dlist tbody').on('click', '#selected_action', function(){...}); 
+0

感謝您的反饋Rob,My Table在表格外有一個按鈕,我使用Selected行類來標識角色,並且當前從第二列中獲取數據。我沒有每行的按鈕,我正試圖節省屏幕空間,並將所有按鈕放在窗體的頂部。我喜歡你的榜樣,是的,該行上的按鈕可以工作。我真的希望使用比我的代碼更清潔的示例中的DataTable現有結構和模型。 –