简体   繁体   English

React - 如何将 onclick function 添加到数据表中每一行的按钮

[英]React - How to add onclick function to buttons in each row in Datatables

I'm trying to add: edit and delete buttons to each row in my datatable, but clicking the buttons don't execute the functions declared in the "onclick"我正在尝试添加:编辑和删除按钮到我的数据表中的每一行,但单击按钮不会执行在“onclick”中声明的功能

$(schedTableID).DataTable({
      data: schedData.data,
      order: [[0, "asc"]],
      columns: [
        { data: "id",render: function(data, type, row) { return data; }, },
        { data: "timein", render: function(data, type, row) {  return data; }, },
        { data: "timeout", render: function(data, type, row) {  return data; }, },
        { data: "slot", render: function(data, type, row) { return data; }, },
        { data: "session", render: function(data, type, row) { return data; }, },
        { data: "schedule", render: function(data, type, row) { return data; }, },
        { data: "statuss", render: function(data, type, row) { return data; }, },
        { data: "id", render: 
          function(data, type, row) { 
            return(
              `
                <button  class="m-0 p-2 px-2 btn btn-success feather icon-check" data-toggle="button" id="${data}" onClick="${deleteHandler}"></button>
                <button  class="m-0 p-2 px-2 btn btn-danger feather icon-x" data-toggle="button" id="${data}" onclick="${deleteHandler}"></button>
              `
            )
          }, 
        },
        
      ],
      pageLength: 5,
      lengthMenu: [
        [5, 10, 25, 50, 100, -1],
        [5, 10, 25, 50, 100, "Show All"],
      ],
    });

Here are the onclick functions这是 onclick 函数

const deleteHandler = (e) => {
  console.log(123123)
}
const checkHandler = (e) => {
  console.log(123123)
}

I used jquery instead我改用 jquery

$(document).ready(function () {

    $('#data-table-admin').unbind('click').on('click', '.btn-edit', function () {
      let table = $('#data-table-admin').DataTable();
      //retrieve table id, etc. (table.row($(this).parents('tr')).data().id)

      //function here 
    });


   $('#data-table-admin').on('click', '.btn-delete', function () {
      let table = $('#data-table-admin').DataTable();
      //retrieve table id, etc. (table.row($(this).parents('tr')).data().id)

      //functionality here

   });

});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在新添加的行(DataTables)上添加onclick事件? - How to add an onclick event on a newly added row (DataTables)? 如何在DataTables表的每一行上为按钮添加onclick回调 - How to add an onclick callback for button on every row of a DataTables table 将带有onclick事件的按钮添加到react js中数据表中的每一行 - Add button with onclick event to each row in datatable in react js 如何使用ajax和jquery在数据表中使用for循环为每行添加按钮 - How to add button for each row using for loop in datatables by ajax and jquery 如何在 HTML 数据表的每一行中添加一个表单? - How can i add a form in each row in HTML datatables? 如何在PHP生成的内容的每一行中添加单独的onclick / EventListener函数? - How do i add an individual onclick/EventListener function to each row of PHP generated content? 如何在jQuery DataTables行添加功能中传递HTML - How to pass html in jquery datatables row add function 动态添加按钮并为其添加onclick功能 - Dynamically add buttons and add onclick function to it OnClick-如何在React中为每张幻灯片添加First,Last和活动的ClassName? - OnClick - How to add first, last and active ClassName for each slide in React? 如何在每个表格行的末尾添加按钮? - How can I add buttons at the end of each table row?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM