0

I am new to javascript, I wanted to create a new application which uses a Data table. The data table is dynamically rendered. I have a set of data which is passed as dataSet.

But the problem is I want to add a function "showDetails(id)" for each row (here id refers to row id). Im stuck with this

$(document).ready(function() {
    $('#example').DataTable( {
    data: dataSet,
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
          { title: "Salary" }]
   } );
} );
2
  • Okay fine and where is the code which shows what you tried?
    – CodeThing
    Sep 25, 2018 at 5:47
  • @CodeThing first of all what do u think the above piece of code is? Second point is im stuck on where to add the onclick event because im passing raw data Sep 25, 2018 at 5:48

4 Answers 4

2

I would suggest instead of adding showDetails(id) to each row you add it to parent component. In this way only a single click listener will get attached (good from performance perspective). Add onclick to #example element in your case.

How this works is when any of the child element (row) is clicked event will bubble and reach the parent component where you can leverage event.target.id to get hold of which row is clicked and execute appropriate function.

Read more about it here https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

As written in other post official documentation also suggests it following way where you are adding event listener to tbody and not each row.

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} ); 
2

after creating your datatable you can simply attach an event to it.

$(document).ready(function() {
     $('#example').DataTable( {
       data: dataSet,
       columns: [
                 { title: "Name" },
                 { title: "Position" },
                 { title: "Office" },
                 { title: "Extn." },
                 { title: "Start date" },
                 { title: "Salary" }]
            });

    $('#example tbody').on('click', 'tr', function () {
      var data = table.row( this ).data();
      alert( 'You clicked on '+data[0]+'\'s row' );
    });
});

for more refrenece you can visit official site example.

2

Hi the following code will help you to get the row click event in a jQuery data-table, There you can implement the showDetails(id); functionality.

var table = $('#example').DataTable();
          $(document).on("click", "#example tr", function(e) {
                var data = table.row( this ).data();
                alert( 'You clicked on '+data[0]+'\'s row' );
          });

You can look the working fiddle I have created fiddle

1

No matter how the data table is rendered, it still is a markup that is added dynamically to the DOM.

So, a delegated event listener like the following will work.

$("table").on('click', 'tr', function() {
    // Get the id somehow
    let id = 1;
    showDetails(id);
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.