DataTables logo DataTables

How to update table cell ID inside DataTable (target cell id or form id)
  • 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();
    				});
    
    			});
    
  • no one have a idea how to target specific input id?
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.