0

Note:I accept Stephen Muecke as the answer to this question.

I am using DataTables (datatables.net) to create a table of a list of items.

The table has within a cell has custom stored HTML5 data.

DataTable Row

How do I get the values stored in

data-id data-description

and etc.

The table it self only displays the Title and that is it.

enter image description here

The other data is "hidden" and need it to pass to some other fields on the same page.

More like a Table "More" details function.

enter image description here

Goal is to have it where a user clicks on the "Title" and jQuery extracts the HTML5 Data and uses this to populate fields that are below the table that the user had clicked on.

User also have the option to edit the data and save it back to the database.

This is what I had tried to use so far to do this but no luck.

 <script> $(document).ready(function () { $('#SaveSearches').DataTable(); });

 </script>


$('#SaveSearches tbody').on('click', 'td', '.savedSearch', function ()
{
    alert(table.cell(this).data());

    table.$(this).data('Id');


    alert(table.$(this).data('Id'));
});

With the code above just trying to get the values from the HTML5 data.

Thanks for your help :)

Kbdavis07
  • 1,012
  • 13
  • 24
  • 1
    `$('#SaveSearches tbody').on('click', '.savedSearch', function() { var id = $(this).data('id'); })` –  Sep 10 '17 at 00:49

1 Answers1

1

You selector is handling the .click() event of any <td> element (note the 3rd parameter of on() (in your case '.savedSearch') is

Data to be passed to the handler in event.data when an event is triggered.

Refer documentation

In addition, the name of the data attribute is case sensitive, so your code should be

$('#SaveSearches tbody').on('click', '.savedSearch', function() {
    // get the value of the data-id attribute
    var id = $(this).data('id');
    ....
})

Note also that your attributes should be all lower case (refer also are html5 data attributes case insensitive? and the associated links to standards)