Develop Reference

Datatables child.row using AJAX not refereshing

I'm trying to fetch child row data in Datatables using AJAX:
$('#myTable tbody').on('click', 'td', function () {
var tr = $(this).closest('tr');
var row = myTable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.remove();
tr.removeClass('shown');
}
else {
$.post('/salesLines',
{ token: localStorage.getItem('token'),
user: user.node,
id: localStorage.getItem('uniqueid')
})
.done(function(response) {
$.each(response.data, function (i, d) {
result += '<tr>'+'<td>'+d.qtysold+ ' ' + d.descr + ' ' + d.linetotal+'</td>'+'</tr>';
row.child( $(result) ).show(); // use selector $() for result to align child rows with main table column headings
tr.addClass('shown');
});
}
});
The AJAX request seem to cache the data even though it is using $.post.
Any suggestions would be appreciated!

Changed the .on click event from
$('#myTable tbody').on('click', 'td', function () {
to:
$('#myTable tbody').on('click', 'tr', function () {
and now it works!

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' );
} );
} );

DataTable slidedown row.child()

I want to slide-down a div for each row when button is clicked. Currently dataTable row.child() calls format function in this form.
Refer fiddle: http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/
function format ( d ) {
return '<div class="slider">Test Message</div>';
}
Is it possible to return div for each row as like below
<div class="slider">Test Message</div>
function format(d){
return $('div.slider');
}
Finally the jQuery looks like this.
$('#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');
}
});

You can add style="display: none" for .player element and slide that one up/down when necessary.
For example:
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
row.child().find('.player').slideUp(400, function(){
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
});
}
else {
// Open this row
row.child( format(row.data()) ).show();
row.child().find('.player').slideDown();
tr.addClass('shown');
}
} );
Also you can return jQuery element in format() function, row.child() accepts jQuery as an argument as well. See row.child() API method for more information.
See updated jsFiddle for code and demonstration.
See Sliding child rows post for alternative solution.

To Avoid some extra transaction of Data from DB,by using this Code
$('#mytable').on('click', '.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child() != null) {
// This row is already open - close it
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child.show();
tr.addClass('shown');
}
} else {
var childTable = format(id, date);
row.child(childTable).show();
tr.addClass('shown');
}
});

Uncaught TypeError: row.child.hasClass is not a function

I'm creating row details for DataTables without Ajax.
I do somethink like this for show:
$(document).ready(function () {
function format ( name, value ) {
return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}
var table = $('#servicetable').DataTable({
stateSave: true,
pageLength: 10,
});
$('#servicetable tbody').on('click', 'button.test', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
row.child( format( tr.data('child-name'), tr.data('child-value') ) ).show();
if ( row.child.hasClass('shown') ) {
// 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');
}
} );
});
When I click button for open - everythink is ok, but when I click again for hide I getting error:
Uncaught TypeError: row.child.hasClass is not a function
What's bad?
Here is demo: JSFiddle

Check this jsfiddle
Datatable child doesn't seem to provide a hasClass function.
Also I think you were checking for 'shown' class in the wrong element. I also removed row.child.show() on opening, it is already done before the if statement.
if ( tr.hasClass('shown') ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
tr.addClass('shown');
}

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.