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.
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 got the jQuery datatable hide column feature to work properly. The following code will hide the 2nd column of the table:
HTML
Show/Hide
JS
$(document).ready(function()
{
var table = $('#example1').DataTable();
$('a.toggle-vis').on('click', function(e)
{
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible( ! column.visible());
});
}
What I would like to do is initially hide the column when the user first enters the page. The column will only show when clicked.
How do I go about adjusting the code to achieve this effect?
You need to use columnDefs
Try:
var table = $('#example1').DataTable(
{
"columnDefs": [
{
"targets": [ 2 ],
"visible": false
}
]
} );
EDIT
I'm not sure why that doesn't work. Adding the code in here since in the comment did not display well.
Try this instead:
var table = $('#example1').DataTable();
table.column(1).visible(false);
Try this
$(function () {
// To hide the table header during page load
$("#example1 tr th:nth-child(2)").hide();
// To hide the 2nd column during page load
$("#example1 tr td:nth-child(2)").each(function () {
$(this).hide();
});
// Hide and show while clicking the link
$(".toggle-vis").click(function () {
var col = $(this).data("column");
// Hide/Show the header
$("#example1 tr th:nth-child(" + col + ")").is(":visible") ? $("#example1 tr th:nth-child(" + col + ")").hide() : $("#example1 tr th:nth-child(" + col + ")").show();
// Hide/Show the details
$("#example1 tr td:nth-child(" + col + ")").each(function () {
$(this).is(":visible") ? $(this).hide() : $(this).show();
});
});
});
When I integrate jQuery DataTables column filter and row grouping, jQuery DataTables column filter is not working.
I tried the demo but it seems in the demo column filter also does not work.
SOLUTION
Plug-ins Row Grouping along with Column Filtering are no longer being developed, I would not recommend using them. Use DataTables options and API methods to perform row grouping and individual column searching as shown in Row grouping example and Individual column searching example.
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({
"order": [[2, 'asc']],
"drawCallback": function (settings){
var api = this.api();
// Zero-based index of the column for row grouping
var col_name = 2;
// If ordered by column containing names
if (api.order()[0][0] === col_name) {
var rows = api.rows({ page: 'current' }).nodes();
var group_last = null;
api.column(col_name, { page: 'current' }).data().each(function (name, index){
var group = name;
if (group_last !== group) {
$(rows).eq(index).before(
'<tr class="group"><td colspan="6">' + group + '</td></tr>'
);
group_last = group;
}
});
}
}
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
DEMO
See this jsFiddle for code and demonstration.
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.