从数据表错误中的按钮获取数据

Posted 2023-05-07

【中文标题】从数据表错误中的按钮获取数据

【英文标题】：Get data from button inside datatables error

【发布时间】：2020-01-23 10:10:28

【问题描述】：

我有如下数据表脚本。数据表工作正常，但是当我单击 edit 按钮时，我收到如下错误：

未捕获的类型错误：datatables.row 不是函数。

如何修复代码并获取编辑按钮的 ID？

let data_table = $('#categories_table');

let datatables = data_table.dataTable(
  "processing": true,
  "serverSide": true,
  "order": [
    [5, "asc"]
  ],
  ajax: '/admin/categories/datatables',
  columnDefs: [
    'targets': 0,
    'searchable': false,
    'orderable': false,
    'render': function(data, type, full, meta) 
      return '<input type="checkbox" class="form-check-input-styled-primary" name="ids[]" value="' +
        $('<div/>').text(data).html() + '">';
    
  , 
    targets: -1,
    title: 'Actions',
    orderable: false,
    render: function(data, type, full, meta) 
      return `<a  href="#"  title="Edit User" class="list-icons-item text-primary-600 edit">
          <i class="icon-pencil7"></i>
        </a>
        <a href="#" title="Delete User" class="list-icons-item text-danger-600 delete">
          <i class="icon-trash"> </i>
        </a>`;
    ,
  ]
);

datatables.on('click', '.edit', function(event) 
  event.preventDefault();
  var data = datatables.row($(this).closest('tr')).data();
  let id = data[1];
  let $edit_url = "/admin/categories/" + id + "/edit";

  $.post($edit_url, 
    id: id,
    csrf_token: $csrf
  ).done(function(data) 
    update_modal.modal("show");
    update_validator.resetForm();
    $(".modal-title").text("Edit User");
    update_modal.find("form")[0].reset();
    $("#id").val(data.id);
    $("#update_csrf").val($csrf);
    $("#update_name").val(data.name);
    $("#update_email").val(data.email);
    $("#update_role").val(data.role);
    $("#update_status").val(data.is_active);
  );
);

【问题讨论】：

我觉得你应该试试var data = $(this).closest('tr').data();var data = datatables.row($(this).closest('tr')).data();

这里icon-pencil7是<i>标签的自动增量类？

@HimanshuUpadhyay 不，这不是无关紧要的。

@HimanshuUpadhyay 当我尝试你的方式时似乎我没有收到错误但没有数据只是一个对象。

其实@Ying，<a> 应该有一些属性，比如<a href="#" title="Edit User" class="list-icons-item text-primary-600 edit" data-record="4"> <i class="icon-pencil7"></i> </a>，然后你写的 jquery 可以获取该值4，然后你可以进一步传递它。跨度>

【参考方案1】：

您可以像这样修改您的编辑：

 
                    targets: -1,
                    title: 'Actions',
                    orderable: false,
                    render: function( data, type, row, meta ) 
                        return '\
                        <button class="btn btn-outline bg-primary border-primary text-primary-800 btn-icon btn-sm edit" data-category='+ row[1] + '>\
                          <i class="icon-pencil7"></i>\
                        </button>\
                        <button title="Delete User" class="btn btn-outline bg-danger border-danger text-danger-800 btn-icon btn-sm e delete">\
                          <i class="icon-trash"> </i>\
                        </button>';
                    ,
                

然后在您的点击编辑按钮中，您甚至可以像这样获得类别 ID：

    let id = $(this).data("category");