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!
Related
I have two fields where to look for the values present in the first and fourth columns of the table. I would like to show a drop-down list of possible values that start with the text I'm writing.
How can I change the following javascript function in the post-Execution of the table component to do it?
function f() {
$(document).ready(function () {
// Setup - add a text input to each footer cell
var arrayColumns = ['ID', 'Type'];
$('#example thead th').each(function () {
var testo = $('#example thead th').eq($(this).index()).html();
var title = $('#example thead th').eq($(this).index()).text();
if (arrayColumns.indexOf(title) > -1) {
$(this).html(testo + '<br><input type="text" placeholder="Search ' + title + '">');
}
});
// DataTable
var table = $('#example').DataTable();
// Apply the search.
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change clear', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
// If you click in the field, it doesn't sort the results in the column in ascending/descending order.
$('input', table.column(colIdx).header()).on('click', function (e) {
e.stopPropagation();
});
});
});
}
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 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');
}
});
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 jQuery code:
var isOk = true;
$('#edit').click(function () {
if (isOk) {
$('table tbody').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'updatePagesOrder.php',
success: function (msg) { //re-number the rows from 1 to n
$('table > tbody tr').each(function (i) {
$(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
});
},
error: function () {
alert("An error occurred");
}
});
}
}, "enable");
}
else {
$("table tbody").unbind();
$('table a').unbind();
}
isOk = !isOk;
In the code above #edit is a button, on the first click it cause the table rows to be sorable, and on the second click it disable the sortable option.
I want that on the third click the rows will be sortable again.
I tried the code above, but it didn't work.
Why? and how can I fix it? Thanks!
Initialize the widget outside the click handler:
$('table tbody').sortable({
disabled: true, // Initially disabled
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'updatePagesOrder.php',
success: function (msg) { //re-number the rows from 1 to n
$('table > tbody tr').each(function (i) {
$(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
});
},
error: function () {
alert("An error occurred");
}
});
}
});
Then just toggle the "disabled" option when you click on the button.
$("#edit").click(function() {
var table = $('table tbody');
table.sortable('option', 'disabled', !table.sortable('option', 'disabled'));
});