Deleting Rows in purchase order like table.

jamo

Allan, fantastic tool...

I have a table that I have designed as a purchase order.. it has line items basically..

fullcode is :

[code]

Click to add a new row
 | Delete selected row

















Subtotal:







Tax:







Total:









/* Global var for counter */
var giCount = 0;
var giRedraw = false;
var paymentstable;
$(document).ready(function() {

//for the table of available data
paymentstable =$('#payments_datatable').dataTable( {
"bScrollCollapse":true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [{"sWidth":"3%","sClass":"tdnopadding"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"55%","sClass":"tdnopaddingleft"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"25%","sClass":"tdnopadding"}]
} );

});//end ready

//recalculates row values
function recalculateRow(idx) {
var qty = $("#itemqty_"+idx).val();
var unit = $("#itemunitcost_"+idx).val();
var tax = $("#itemtax_"+idx).val();
$("#itemtotal_"+idx).val(((qty*unit)*(1+(tax/100))).toFixed(2));
var grandtotal = 0;
var subtotal = 0;
var taxtotal= 0;
var i = 0;
while(i

jamo

PS... ignore lines like

I am working on the Java grails framework which just replaces those with a string. Think of the default as the string that fills that whole tag.

eg.

[code]



just ends up saying

"Total"
[/code]

allan

In the HTML you have:

[code]

[/code]
for the delete row, but in the Javascript to add a new you you've got:

[code]
X
[/code]
What fires the 'deleteRow' function from the HTML, and how does it know what row to delete?

Do you get any Javascript errors showing up in Firebug?

Allan

jamo

Allan,
It is my mistake for not posting the actual html that is posted to the browser. What I pasted is what exists serverside, before being rendered. I will post the rendered html in my next comment because of comment length restrictions.



You will notice that the table gets this as its first column

[code]
'X'
[/code]
which is simply an 'X' link. Clicking on that will trigger the deleteRow function. the index giCount is put in the function at the time you ADD the row. So when the table first loads... and i add a row, then i call fnClickAddRow(). This will set up each row with its fields, including the delete link with the correct giCount value already in there. So clicking the link will pass whatever value it was set up with.

The only error is see in the javascript console is :

Uncaught TypeError: Cannot read property 'nTr' of undefined

I see this when i do the following:

Refresh the page and blank table appears.
Add 3 rows in succession.
try deleting the very first row (no error yet)
then try deleting the SECOND or other row..(this exception happens)

And the table is still drawn on the screen showing 3 rows... the first row never deleted.

I hope this clarifies the situation.

jamo

[code]

Click to add a new row
 



Delete
Qty
Description
Unit Cost
Tax(%)
Total








Subtotal:







Tax:







Total:









/* Global var for counter */
var giCount = 0;
var giRedraw = false;
var paymentstable;
$(document).ready(function() {

//for the table of available data
paymentstable =$('#payments_datatable').dataTable( {
"bScrollCollapse":true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [{"sWidth":"3%","sClass":"tdnopadding"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"55%","sClass":"tdnopaddingleft"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"25%","sClass":"tdnopadding"}]
} );

});//end ready

//recalculates row values
function recalculateRow(idx) {
var qty = $("#itemqty_"+idx).val();
var unit = $("#itemunitcost_"+idx).val();
var tax = $("#itemtax_"+idx).val();
$("#itemtotal_"+idx).val(((qty*unit)*(1+(tax/100))).toFixed(2));
recalculateTotals();

}

function recalculateTotals()
{
var grandtotal = 0;
var subtotal = 0;
var taxtotal= 0;
var i = 0;
while(i

allan

Okay got it - thanks for the clarification. The issue is that when you delete the first row, the second row now becomes the first row, and DataTables updates it's internal indexes to reflect this. You might have got away with the above in DataTables 1.6 (although not 100%) but certainly not in 1.7.

What I would suggest is something slightly different rather than your DOM0 events - try using jQuery events. Something like this in the 'ready' function and remove the DOM0 stuff:

[code]
$('#payments_datatable tbody tr a').live( function () {
paymentstable.fnDeleteRow( this.parentNode );
return false;
} );
[/code]
With DOM0 is it possible to do what you want to do, you could use the 'target' property of the mouse event. But it's a little bit of a pain with cross browser issues, while jQuery takes care of that for you.

Allan

jamo

Allan
I just figured out my mistake a few minutes ago as well. And i refactored but I appreciate the snippet you provided. That is probably the better way to go. I do have a followup question though... when I delete a row.. the subtotal, total and tax calculations in my recalculateTotals function ... are being called but for some reason, .. my footer only shows NaN or nothing ? what is wrong with my function once a delete on any row has taken place ?

thanks

Jamo

allan

I think that's basically the same issue as you were having with DataTables. If you create an element 'itemqty_0' but then delete it, your function will still try to count the element with that ID since it is starting at 0. Have you seen this example, it might provide a different solution: http://datatables.net/examples/advanced_init/footer_callback.html

Allan

jamo

Allan
You are right about the calculations - Doh! Should have thought of that.

You little bit of sample code ... I added it to my ready() function

[code]

/* Global var for counter */
var giCount = 1;
var giRedraw = false;
var paymentstable;
$(document).ready(function() {



//for the table of available data
paymentstable =$('#payments_datatable').dataTable( {
"bScrollCollapse":true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [{"sWidth":"3%","sClass":"tdnopadding centercontent"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"55%","sClass":"tdnopaddingleft"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"10%","sClass":"tdnopadding"},{"sWidth":"25%","sClass":"tdnopadding"}]
} );

$('#payments_datatable tbody tr a img').live(function(){
paymentstable.fnDeleteRow(this.parentNode.parentNode);
return false;
});

});//end ready
[/code]

with a slight variation : instead of the X .. i now have an image of an X so i modified it accordingly.
does it matter if it is placed after table initalization ? or before ?

does this work even for items that are being added to the table dynamically using fnAddData() ?

thanks

allan

> does it matter if it is placed after table initalization ? or before ?

For a live event - no that's absolutely fine. It will match everything dynamically.

> does this work even for items that are being added to the table dynamically using fnAddData() ?

Yes indeed - again live events are perfect for just this kind of thing :-)

Allan

jamo

Allan,
i worked it all out .. thanks for the help. I have my code and I would love to post it here or on the sticky post you have on how folks are using the table.. but your comment restrictions do not allow my posting through. Let me know if you prefer I email it to you..

thanks
Jamo

allan

You can send it to me using http://datatables.net/contact . It might be one which is suitable for a new example :-)

Allan