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]);
} );
});
Related
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!
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' );
} );
} );
I have this function
var table = $(tableId);
var datatable = table.dataTable();
table.on('click', 'i.pointerCursor', function() {
var $this = $(this),
tr = $(this).closest( 'tr' ).get(0);
if ( datatable.fnIsOpen(tr) ) {
$this.removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' );
datatable.fnClose( tr );
} else {
$this.removeClass( 'fa-plus-square-o' ).addClass( 'fa-minus-square-o' );
console.log(tr);
console.log(datatable.fnGetData(tr));
datatable.fnOpen( tr, self.dataTableFormatRow( datatable,tr,$this[0].attributes[0].textContent), 'details' );
}
});
I am logging out the tr and the datatable.fnGetData(tr), because I would need the row as an object. The tr returns the actual row, but when I pass this tr to the datatable.fnGetData(), it always returns a totally different object. And this object seems always the same, even if I click on a different row.
I can't figure it out, why this is. How could I fix this? Or should I replace the code?
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');
}
I have the following javascript in my website:
$('#example tbody').on( 'click', 'input', function () {
var data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
$(".iframe2").click(function() {location.href = "record_dt.php?ID="+data[0]});
});
} );
When clicking the respective buttons on my datable 'iframe' and 'iframe3' work fine with a normal single click. However, when i click on the respective button for iframe2 I have to click twice for the button to respond. Not necessarily double click but one click and then another. Any idea why this is happening? Since 'iframe' and 'iframe3' are associated with colorbox this is the respective code:
FULL CODE:
<script>
$(document).ready(function()
{
$(".iframe").colorbox({iframe:true, width:"700px", height:"80%"});
$(".iframe3").colorbox({iframe:true, width:"300px", height:"20%", onLoad: function() {
$('#cboxClose').remove();
}});
});
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<input type='image' src='delete.png' id='button' >"
},
{
"targets": -2,
"data": null,
"defaultContent": "<input type='image' src='edit.png' id='button' >"
},
{
"targets": -3,
"data": null,
"defaultContent": "<input type='image' src='edit.png' id='button'>"
}
],
"order": [[ 0, "desc" ]]
} );
var data = false;
$('#example tbody').on('click', 'input', function(){
// on input click, set the data to new value
data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
});
$(".iframe2").click(function()
{
if(data) {location.href = "record_dt.php?ID="+data[0];}
});
});
</script>
These are working fine with a single click. The problem is 'iframe2'.
Simply move your click event trigger to outside the other event trigger for your tbody:
// Since the table2 click event needs to know about the data value as well,
// set it as a global, shared variable.
var data = false;
$('#example tbody').on('click', 'input', function(){
// on input click, set the data to new value
data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
});
$(".iframe2").click(function(){
// check if data is not false (aka unset), if not, execute location change
if(data) location.href = "record_dt.php?ID="+data[0]});
});
Now the click event is attached on load and not after the initial click on tbody, which resulted in your initial need to click twice.
You are defining iframe2 click event inside $('#example tbody') click event.
So on first click it binds click event and then second time it works.