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