Develop Reference

How to add a onclick function on every Datatable Table tr? [duplicate]

This question already has answers here:
How to make datatable row or cell clickable?
(5 answers)
Closed 4 years ago.
I am using datatable using ajax calling and the script for datatable is like -
$(document).ready(function() {
$('#example').DataTable({
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" }
]
});
});
and every row is showing like - "<tr role="row" class="even">"
But i need to put a onlcick function every datatable rows like - "<tr ondblclick="getDetails(id)" role="row" class="even">"
so how can i do that any suggestion ?
Thanks in advance.

you can make a jquery on click event on the class "even".. But to recieve an ID you will need to have either an id or a data-id on each row to know which id you want to use..
<tr role="row" class="even" data-id="1">
<tr role="row" class="even" data-id="2">
$(".even, .odd").on("click", function() {
var id = $(this).data("id); or $(this).id(); // need to check what rowId does
alert("test"); or alert(id);
getDetails(id);
});
you can set an id by doing something like this:
$('#example').DataTable({
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" }
],
rowId: 'staffId' //staffID has to be given from you
});

As seen at this site you can do
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
or dblclick
$('#example tbody').on('dblclick', 'tr', function () {
var data = table.row( this ).data();
alert( 'You double clicked on '+data[0]+'\'s row' );
} );

jquery datatable have an already click event for your need
you can do this by using simple way taken from this site
1) If you want event for single click on row
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
2) If you want event for double click on row
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('dblclick', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );

Data table row click event not working

I am pulling data from a database using coldfusion into a dataTable and I would like that when I click on a row in the datatable and event is fired which so that the details of that row can be displayed in divs on the same page.
Below is the code I am using but it is not working, I would appreciate it if someone could give me an example that works
I get the following error message:
Error - Cannot read property '_aData' of undefined
$(document).ready(function() {
var table = $('#datatable-buttons').DataTable();
$('#datatable-buttons tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
// alert( 'You clicked on '+data[0]+'\'s row' );
alert("table click"+data[0]);
} );
} );

Try unbinding the event for your buttons before you re-assign them: just add the following line before the row click:
$('#datatable-buttons tbody').off('click');
So changed code is:
$(document).ready(function() {
var table = $('#datatable-buttons').DataTable();
$('#datatable-buttons tbody').off('click');
$('#datatable-buttons tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
// alert( 'You clicked on '+data[0]+'\'s row' );
alert("table click"+data[0]);
} );
});

Show popover upon hover on an icon in a datatable

I generate my datatable in an .ashx file:
(...)
//E.g. This is how I generate an icon which I put into one of the table cells
comment = "<i class=\"fa fa-info\" id=\"popoverData\"aria-hidden=\"true\" data-placement=\"bottom\" data-original-title=\"Comments\" data-content=\"" + comments_text + "\"></i>";
(...)
var data = JsonConvert.SerializeObject(data);
var columns = JsonConvert.SerializeObject(columns);
context.Response.Write("{\"data\":" + data + ",\"columns\":" + columns + "}");
The goal is to show a bootstrap popover upon hover on the above icon. My JavaScript:
$(document).ready(function (){
//this part should generate the bootstrap popover, but it's NOT
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$('#popoverData').popover();
//console log gets activated
console.log("I am in the function");
});
getData();
});
function getData() {
$('#MyDataTableDiv').html('<table id="MyDataTable" class="display" cellspacing="0" width="100%"></table>');
$.ajax({
"url": myUrl/getData.ashx',
"success": function (json) {
json.columnDefs = [
{ targets: '_all', defaultContent: "" },
{ targets: '_all', className: 'dt-body-left' }
];
json.dom = 'Bfrtip';
json.buttons = ['print', 'csv', 'copy'];
$('#MyDataTable').dataTable(json);
},
"dataType": "json"
});
}
The javascript mouseover event gets triggered, but the popover is not working. I've tried this too:
$(document).ready(function (){
$('#popoverData').popover();
getData();
});
But in this case the popover shows up ONLY if the #popoverData element is outside the datatable.
How do I show popover upon hover on the icon?

Please modify your code.
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$(this).popover('show');
});
if this not worked then try
$(document).on('mouseover', '#popoverData', function () {
$(this).popover('show');
});

Cannot change page in datatable

i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks

Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...

Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/

It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......

jquery datatables plug-in issue

I am using jquery datatables and adapted the following example
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
//IMPORTANT PART
'<td>' + '<input type="text" id="inp">' + '</td>'+
'<td>' + '<button id="butt">' + 'click' + '</button>' + '</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
The output of this code is shown here http://www.datatables.net/examples/api/row_details.html
In the row child for each row I've added an input box and a button from where I want to handle the input of the user. For instance, I would like to take the input of the user and construct a link which will open a new window. However, I could not find in the documentation events related to children of the rows in the datatables library? For example, I would like to do something like
$('#example tbody').on('click', '#butt', function () {
//do something
});
the id 'butt' above is a button which is part of the row child. In other words, I would like to manipulate the elements in the row child, not the row itself.

Since datatables adds the element to the DOM you'll have to use a delegate for selection, something like:
$('body').on('click', '#example tbody #butt', function () {
//do something
});
It doesn't necessarily have to be body, but you'll need an element that is not dynamically added to the DOM for jQuery to use.
Also, ID's should be unique, so you won't want to add a button with the same ID to every row. If you need to add multiple buttons you'll want to use a class, bind to the elements with that class, and then handle each one to get the appropriate context.