将单击功能添加到 Jquery DataTable 中的两个按钮

Posted 2023-05-08

【中文标题】将单击功能添加到 Jquery DataTable 中的两个按钮

【英文标题】：Add Click Function To Two Buttons Inside Jquery DataTable

【发布时间】：2018-01-30 16:07:36

【问题描述】：

我有一个带有动态添加的编辑和删除按钮的 jquery 数据表，如下所示：

下面是我的 JS：

 ajaxLoadSuccess: function (data) 
     var datatableVariable = $('#articleTable').DataTable( 
         data: data,
         columns: [
              'data': 'Topic' ,
              'data': 'SubTopic' ,
              'data': 'Title' ,
             // 'data': 'ParsedText' ,
             
                 'data': 'AddedOn', 'render': function (date) 
                      var date = new Date(parseInt(date.substr(6)));
                      var month = date.getMonth() + 1;
                      return date.getDate() + "/" + month + "/" + date.getFullYear();
                 
             ,
              'data': 'AddedBy' ,
             
                'data': 'Action', 'render': function (data, type, row, meta) 
                 return '<input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /> <input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" />';
                 
             ]
        );

下面是我的按钮点击代码：

$("#articleTable tbody").on("click", "tr", function () 
    alert($(this).text());
);

当我单击编辑或删除按钮时，上面的函数被触发，我想要为删除按钮添加另一个函数，以便在单击编辑和删除时触发单独的函数。我怎样才能做到这一点？

【参考方案1】：

在这段代码中，您触发了 tr 的点击事件。而不是触发事件到 tr 你可以触发点击事件到特定的 id。这里有#btnEdit 和#btnDelete

所以你的代码看起来像

$(document).on('click', '#btnEdit', function () 
    // Do something on edit
);

$(document).on('click', '#btnDelete', function () 
    // Do something on delete
);

【讨论】：

这将始终触发点击第一行，因为按 id 选择将针对 DOM 中具有该 id 的第一个元素。

拥有按钮类而不是 ID

由于编辑和删除按钮对每一行都重复，因此不能为每个按钮设置不同的 ID。使用类将是理想的，并且还可以实现所需的功能。

【参考方案2】：

我想你想要这样

$("#articleTable tbody tr").on("click", "input", function () 
    if ($(this).attr('id') == "btnEdit") 
        fn_edit();
    
    else 
        fn_delete();
    
);

【参考方案3】：

如果是这种情况，您似乎想在单击该行的按钮时对该特定行执行操作，那么我的建议是通过为该按钮提供类来访问该按钮，因为您使用的方法将生成多个具有相同 id 的按钮和 html 表单不能有具有相同 id 的元素。

ajaxLoadSuccess: function (data) 
 var datatableVariable = $('#articleTable').DataTable( 
     data: data,
     columns: [
          'data': 'Topic' ,
          'data': 'SubTopic' ,
          'data': 'Title' ,
         // 'data': 'ParsedText' ,
         
             'data': 'AddedOn', 'render': function (date) 
                  var date = new Date(parseInt(date.substr(6)));
                  var month = date.getMonth() + 1;
                  return date.getDate() + "/" + month + "/" + date.getFullYear();
             
         ,
          'data': 'AddedBy' ,
         
            'data': 'Action', 'render': function (data, type, row, meta) 
             return '<input type="button" value="Edit" class="btnEdit sfBtn sfPrimaryBtn sfLocale" /> <input type="button" value="Delete" class="btnDelete sfBtn sfPrimaryBtn sfLocale" />';
             
         ]
    );

现在您可以使用以下代码访问该按钮：

$("#articleTable tbody").on("click", ".btnEdit", function () 
                alert($(this).text());
            );

$("#articleTable tbody").on("click", ".btnDelete", function () 
                alert($(this).text());
            );