How to update table cell ID inside DataTable (target cell id or form id)
How to update table cell ID inside DataTable (target cell id or form id)
Thorbadin
Posts: 3Questions: 0Answers: 0
Hi eveyone, I will try to be very explicit in my explanation:
1. DataTable is setup with a hidden Colum.
2. Inside this hidden colum, I have another table with various information (product info + price + quantity).
3. Inside this table we have a form with input text and a datepicker.
4. What we want to do is:
When a value is change inside the form (onkeypress event). We launch a function who calculate the new quantity * price and update a td cell (ID=total1 for exemple). All our functions and scripts are in Jquery. Normaly we simply use
[code]
$('#Quantity').bind('keyup', function()
{
Calculation();
});
function Calculation()
{
var NewPrice = $('#Price1').val() * $('#QTY1').val();
$('total1').html(NewPrice)
}
[/code]
But in DataTable were unable to target the ID of anything... It must have a easy way to do it, but we didnt find it...
Any help would be greatly appriciated!
Thx in advance!
The config of DataTable:
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += ''+aData[6]+'';
sOut += '';
return sOut;
}
$(document).ready(function() {
/* Insert a 'details' column to the table */
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('table.datatable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('table.datatable>tbody>tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('table.datatable').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"iDisplayLength":50,
"bStateSave": false,
"sPaginationType": "full_numbers"
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('table.datatable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/js/jquery/DataTables-1.9.0/images/details_open.png";
oTable.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "/js/jquery/DataTables-1.9.0/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});
$("#expandAll").click(function(){
$("[src$='details_open.png']").click();
});
$("#collapseAll").click(function(){
$("[src$='details_close.png']").click();
});
});
[/code]
1. DataTable is setup with a hidden Colum.
2. Inside this hidden colum, I have another table with various information (product info + price + quantity).
3. Inside this table we have a form with input text and a datepicker.
4. What we want to do is:
When a value is change inside the form (onkeypress event). We launch a function who calculate the new quantity * price and update a td cell (ID=total1 for exemple). All our functions and scripts are in Jquery. Normaly we simply use
[code]
$('#Quantity').bind('keyup', function()
{
Calculation();
});
function Calculation()
{
var NewPrice = $('#Price1').val() * $('#QTY1').val();
$('total1').html(NewPrice)
}
[/code]
But in DataTable were unable to target the ID of anything... It must have a easy way to do it, but we didnt find it...
Any help would be greatly appriciated!
Thx in advance!
The config of DataTable:
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += ''+aData[6]+'';
sOut += '';
return sOut;
}
$(document).ready(function() {
/* Insert a 'details' column to the table */
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('table.datatable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('table.datatable>tbody>tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('table.datatable').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"iDisplayLength":50,
"bStateSave": false,
"sPaginationType": "full_numbers"
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('table.datatable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/js/jquery/DataTables-1.9.0/images/details_open.png";
oTable.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "/js/jquery/DataTables-1.9.0/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});
$("#expandAll").click(function(){
$("[src$='details_open.png']").click();
});
$("#collapseAll").click(function(){
$("[src$='details_close.png']").click();
});
});
[/code]
This discussion has been closed.
Replies