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)

ThorbadinThorbadin Posts: 3Questions: 0Answers: 0
edited February 2012 in DataTables 1.9
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

$('#Quantity').bind('keyup', function() { Calculation(); }); function Calculation() { var NewPrice = $('#Price1').val() * $('#QTY1').val(); $('total1').html(NewPrice) }
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:
/* Formating function for row details */ function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:5px;">'; sOut += '<tr><td>'+aData[6]+'</td></tr>'; sOut += '</table>'; return sOut; } $(document).ready(function() { /* Insert a 'details' column to the table */ var nCloneTh = document.createElement( 'th' ); var nCloneTd = document.createElement( 'td' ); nCloneTd.innerHTML = '<img src="/js/jquery/DataTables-1.9.0/images/details_open.png">'; 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(); }); });

Replies

This discussion has been closed.