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' );
} );
} );
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!
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]);
} );
});
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.
I am using the following function to control the display of the child rows when an icon is clicked on the appropriate row.
How to show specific child rows on load without click?
$('#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');
}
} );
SOLUTION
Replace anonymous function with named function for click event handler, for example onRowDetailsClick as shown below.
function onRowDetailsClick(table){
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');
}
}
// ... skipped ...
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function (){
onRowDetailsClick.call(this, table);
});
Then you need to use initComplete option to call onRowDetailsClick on specific rows as shown below:
'initComplete': function(settings){
var api = new $.fn.dataTable.Api(settings);
// Open 12th row, zero-based index
api.$('tr').
.eq(11)
.find('td.details-control')
.each(function(){
onRowDetailsClick.call(this, api);
});
/*
// Open rows with class .open
api.$('tr.open').
.find('td.details-control')
.each(function(){
onRowDetailsClick.call(this, api);
});
*/
}
DEMO
/* 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;" width="100%">'+
'<tr>'+
'<td>Salary:</td>'+
'<td>'+d[5]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Start date:</td>'+
'<td>'+d[4]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
function onRowDetailsClick(table){
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');
}
}
$(document).ready(function() {
var table = $('#example').DataTable( {
'ajax': 'https://api.myjson.com/bins/qgcu',
'columns': [
{
'className': 'details-control',
'orderable': false,
'data': null,
'defaultContent': ''
},
{ 'data': 0 },
{ 'data': 1 },
{ 'data': 2 },
{ 'data': 3 }
],
'order': [[1, 'asc']],
'initComplete': function(settings){
var api = new $.fn.dataTable.Api(settings);
// Open 12th row, zero-based index
api.$('tr')
.eq(11)
.find('td.details-control')
.each(function(){
onRowDetailsClick.call(this, api);
});
}
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function (){
onRowDetailsClick.call(this, table);
});
} );
td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example" class="stripe row-border order-column compact">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Ext</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Ext</th>
</tr>
</tfoot>
</table>
You would do it just after the DataTable init call.
For example:
$(function(){
var table = $('#example').DataTable({
// ToDo: Your DataTable options HERE
})
var openDetailRow = function(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');
}
};
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
openDetailRow( tr );
});
// Just a guess on which would be the first to show.
// Replace with whichever one should be shown.
var initialRowToShowDetails = $('#example tbody tr').first();
openDetailRow(initialRowToShowDetails);
});
You could even do it before binding the event, but I tend to bind events as early as I can.
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.