I want to get current attribute Values When I Click on current Table row In Jquery DataTable, I achieved my need but the Jquery code is working only on the 1st page of DataTable After 1st-page jquery is not working, and unable to get current table row attribute. Please Have a look over my simple Code. HTML and Jquery code.
$(document).ready(function() {
$('#table_id').DataTable();
});
$(document).ready(function() {
$('td').on('click', function() {
var id = $(this).attr('id');
console.log(id);
})
});<html lang="en">
<head>
<title>Jquery data Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="table_id" class="display">
<thead>
<tr>
<th id="one">Column 1</th>
<th id="two">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td id="one">Row 1 Data 1</td>
<td id="two">Row 1 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="one">Row 1 Data 1</td>
<td id="two">Row 1 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="one">Row 1 Data 1</td>
<td id="two">Row 1 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
<tr>
<td id="one">Row 1 Data 1</td>
<td id="two">Row 1 Data 2</td>
</tr>
<tr>
<td id="three">Row 2 Data 1</td>
<td id="four">Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>You are using a jQuery event handler:
$('td').on('click', function() { ... }
But you have attached it to an inappropriate element (in this case, to a <td> element). This means that the event will only be attached to those <td> elements which actually exist when the table is first created - namely, the <td> elements in the first page of the table. DataTbles hides all the remaining <td> elements for page 2 onwards.
Instead, you can attach the click event handler to a suitable parent or ancestor element (one which is guaranteed to exist when the page is ready), and delegate to the <td> elements when you do so:
$('body').on('click', 'td', function() { ... }
(In your specific example, you could also use table or tbody instead of body.)
This is a "delegated event handler".
See the jQuery on() documentation:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().
and:
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.
The key here is that the descendant element (the <tr>) does not need to exist when the ancestor element (the <body>) has the event added to it.
Demo:
$(document).ready(function() {
$('#example').DataTable();
$('table').on('click', 'td', function() {
var id = $(this).attr('id');
console.log(id);
} )
} );<!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="example" class="display">
<thead>
<tr>
<th id="head_one">Column 1</th>
<th id="head_two">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td id="one">Row 01 Data 01</td>
<td id="two">Row 01 Data 02</td>
</tr>
<tr>
<td id="three">Row 02 Data 01</td>
<td id="four">Row 02 Data 02</td>
</tr>
<tr>
<td id="five">Row 03 Data 01</td>
<td id="six">Row 03 Data 02</td>
</tr>
<tr>
<td id="seven">Row 04 Data 01</td>
<td id="eight">Row 04 Data 02</td>
</tr>
<tr>
<td id="nine">Row 05 Data 01</td>
<td id="ten">Row 05 Data 02</td>
</tr>
<tr>
<td id="eleven">Row 06 Data 01</td>
<td id="twelve">Row 06 Data 02</td>
</tr>
<tr>
<td id="thirteen">Row 07 Data 01</td>
<td id="fourteen">Row 07 Data 02</td>
</tr>
<tr>
<td id="fifteen">Row 08 Data 01</td>
<td id="sixteen">Row 08 Data 02</td>
</tr>
<tr>
<td id="seventeen">Row 09 Data 01</td>
<td id="eighteen">Row 09 Data 02</td>
</tr>
<tr>
<td id="nineteen">Row 10 Data 01</td>
<td id="twenty">Row 10 Data 02</td>
</tr>
<tr>
<td id="twenty-one">Row 11 Data 01</td>
<td id="twenty-two">Row 11 Data 02</td>
</tr>
<tr>
<td id="twenty-three">Row 12 Data 01</td>
<td id="twenty-four">Row 12 Data 02</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Final note: Please make sure all your id attributes are unique in each page. Your question contains a lot of duplicate id values.