Get data from button inside datatables error

Question

I have Datatables script as below. The Datatable works fine, but when I click the edit button I'm getting an error like this:

Uncaught TypeError: datatables.row is not a function.

How can I fix the code and get the ID for my edit button?

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);
  });
});

I think you should try var data = $(this).closest('tr').data(); var data = datatables.row($(this).closest('tr')).data(); — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Sep 23, 2019 at 10:50
Here icon-pencil7 is the auto incremental class to <i> tag? — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Sep 23, 2019 at 10:52
@HimanshuUpadhyay when i try your way seems like i don't get an error but no data just an object it seems. — Ying
– Ying, Commented Sep 23, 2019 at 10:55
Actually @Ying, there should be some attribute to the <a> like this <a href="#" title="Edit User" class="list-icons-item text-primary-600 edit" data-record="4"> <i class="icon-pencil7"></i> </a> then the jquery you wrote can pick up that value 4 and then you can pass it further. — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Sep 23, 2019 at 10:57

Eko · Accepted Answer · 2019-09-24 06:55:48Z

You can modify your edit like this:

 {
                    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>';
                    },
                }

and then in your click edit button even you can get the category id like this:

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

Collectives™ on Stack Overflow

Get data from button inside datatables error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related