JQuery datatable event modify button

Question

I was working on a web application with JQuery datatables in it, and I have ran into some issues.

I am using the detailsTable.on('click', 'button.edit', function () { ... }) function to catch clicking events on buttons with a class "edit". It is working just fine, and I figured out, that i can get the row data with using detailsTable.row($(this).parents('tr')).data();. But it contains only the data I recived in the ajax call.

My idea is to change the html of the button I clicked on, but I can't find any solution, how to modify it. (I'd like to modify only in this row.)

Any ideas?

My html:

<table id="datatable" class="table table-bordered table-striped table-hover table-sm table-head-fixed">
 <thead>
  <tr>
   <th>Value 1</th>
   <th>Value 2</th>
   <th>Actions</th>
  </tr>
 </thead>
</table>

My javascript:

$(function () {
  var mytable = $("#datatable").DataTable({
    "ajax": {"url": "", dataSrc: "data"},
    "columns": [
      { "data": "val_2" },
      { "data": "val_1" }
    ],
    "columnDefs": [
      {
        "targets": 2,
        "render": function ( data, type, full, meta ) {
          return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
        },
      },
    }
  });

  $('#datatable tbody').off('click')on('click', 'button.edit', function () { // Delete token
    var data = mytable.row($(this).parents('tr')).data();

    // I'd like to change the button, (I need to change the title, the fa-icon and the class, so basicely the whole html) like the way i did with "columnDefs"
  });
});

Check out the DataTables select option, I think this is what you are looking for. You will need to add the event handler after the initialization of your table has closed. Can you please provide some reproducible code? — BeerusDev
– BeerusDev, Commented Sep 9, 2021 at 13:05
It's not clear (to me) what exactly you are trying to do. Are you trying to access the DOM node, instead of the row data? Otherwise, an example or minimal reproducible example with data and the expected outcome may help. — andrewJames
– andrewJames, Commented Sep 9, 2021 at 13:09
@andrewjames after further review of the docs, I don't know if this is possible without the paid Editor Extension. I know you are able to get the row data as well as the DOM node, but I do not think you can do anything other than delete it with the basic datatables? — BeerusDev
– BeerusDev, Commented Sep 9, 2021 at 13:40
@BeerusDev - You can change both the data and the HTML using the basic (free) DataTables product. — andrewJames
– andrewJames, Commented Sep 9, 2021 at 13:56
Thank you for the clarifications - that helped. Just to point out: There are a couple of typos in the code in your question - it will not run, so it can't be the code you are actually using. I suspect these were just copy/paste issues: no closing ] for the columnDefs option; and ('click')on('click', has a missing .. — andrewJames
– andrewJames, Commented Sep 9, 2021 at 19:32

andrewJames · Accepted Answer · 2021-09-09 19:28:31Z

Instead of accessing the source data values using data(), you can access the node using node(). Also, because you want to change the clicked button, you can get the <td> node for the cell in which the button is placed, instead of getting the row:

var td =  mytable.cell($(this).parents('td')).node();

This can then be manipulated using jQuery or JavaScript - for example:

$( td ).find( 'button' ).html('I was ckicked');

Demo:

var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "id": "567",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "432",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "987",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    }
  ];

$(document).ready(function() {

var mytable = $('#datatable').DataTable( {
  lengthMenu: [ [2, -1] , [2, "All"] ],
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ],
  
  "columnDefs": [
    {
      "targets": 2,
      "render": function ( data, type, full, meta ) {
        return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
      },
    },
  ]  

} ); 

$('#datatable tbody').off('click').on('click', 'button.edit', function () { // Delete token
  var td =  mytable.cell($(this).parents('td')).node();
  $( td ).find( 'button' ).html('I was ckicked');
});
  

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="datatable" class="display dataTable cell-border" style="width:100%">
    </table>

</div>


</body>
</html>

Collectives™ on Stack Overflow

JQuery datatable event modify button

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related