如何在 JQuery 数据表的每一行中添加多个按钮以及如何在它们上应用事件

Posted

技术标签:

【中文标题】如何在 JQuery 数据表的每一行中添加多个按钮以及如何在它们上应用事件【英文标题】:How add more then one button in each row in JQuery datatables and how to apply event on them 【发布时间】:2015-09-28 10:41:06 【问题描述】:

我有一个按钮,但我需要两个按钮,并在单击它们以从底层数据库获取数据时执行一些 mysql

如何使用这两个按钮执行事件?

$(document).ready(function () 
    var table= $('#example').dataTable( 
        "ajax": "..//wp-content/plugins/jobify/Admin/data.txt",
        "columnDefs": [ 
            "targets": -1,
            "data": null,
            "defaultContent": "<button>View Posted Jobs</button>"
         ]
     );

    $('#example tbody').on( 'click', 'button', function () 
        //var data = table.row( $(this).parents('tr') ).data();
     );
 );

【问题讨论】:

您可能想查看columnDefs render 选项。请参阅文档here 请尽量格式化您的问题,并使其尽可能简洁(简短但描述清楚)。作为回报,您将获得更多关注和更好的答案。 【参考方案1】:

只需为每个按钮分配一个类,并为每个类附加一个事件处理程序。

$(document).ready(function () 
   var table = $('#example').dataTable( 
      "ajax": "../wp-content/plugins/jobify/Admin/data.txt",
       "columnDefs": [ 
          "targets": -1,
          "data": null,
          "defaultContent": 
             '<button class="btn-view" type="button">View Posted Jobs</button>'
             + '<button class="btn-delete"  type="button">Delete</button>'
         ]
      );

     // Handle click on "View" button
     $('#example tbody').on('click', '.btn-view', function (e) 
        //var data = table.row( $(this).parents('tr') ).data();
      );


     // Handle click on "Delete" button
     $('#example tbody').on('click', '.btn-delete', function (e) 
        //var data = table.row( $(this).parents('tr') ).data();
      );
);

【讨论】:

以上是关于如何在 JQuery 数据表的每一行中添加多个按钮以及如何在它们上应用事件的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - jqGrid - 在每一行提交按钮

如何在gridPanel中的每一行添加一个按钮

HTML/Javascript/jquery 函数按钮在 TextArea 中的每一行末尾放置逗号

如何为数据表的每一行添加按钮?

如何在 slickgrid 的每一行上创建一个删除按钮并确认?

如何在 django 管理页面中的每一行的列表页面上放置一个按钮