DataTables logo DataTables

via Ad Packs
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