2016-11-10 132 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现有结构和模型。 –