Using Datatables with other javascript functions

jlock

I have an established page for clients to pay their bills - the table has a checkbox on each row so that a client can check the checkboxes for the invoices they wish to pay. When a checkbox is clicked, the total amount of the bills is shown at the bottom. This is all done with javascript that someone wrote before me. The issue is that when i implement datatables, that javascript no longer works. Changing the old javascript is not really an option as it is very complicated.

How can I get these both to work? Why is datatables causing javascript to no longer work?

kthorngren

Its hard to say without seeing the code. Here is an example of Datatables putting totals in the footer:
https://datatables.net/examples/advanced_init/footer_callback.html

This example could be updated to use the Select extension to sum only selected rows.

Kevin

jlock

would this help? this is outside of the script for datatables...

var checkName is where is looking at the checkbox on each row

            function updateTotal() {
                formObj = document.getElementById("page_form");
                var el = formObj.elements;
                if (!el) {
                    return false;
                }
                var checkName = "invoice";
                var len = checkName.length;
                var total = 0;
                for (count = 0; count < el.length; count++) {
                    if (el[count].name.substring(0, len) == checkName) {
                        if (!el[count].disabled) {
                            if (el[count].checked) {
                                var InvoiceNum = el[count].value;
                                var InvoiceNum = InvoiceNum.replace("'", "");

                                var element = document.getElementById("INVOICE_" + InvoiceNum.replace("'", ""));
                                if (element) {
                                    total += parseFloat(element.value);
                                }
                            }
                        }
                    }
                }
                total = total.toFixed(2);

                document.getElementById("total").innerHTML = "<p style='font-size: 2em; text-align: right;'>TOTAL:&nbsp;$" + total; +"</p>"
                document.getElementById("totalValue").value = total;
                updateService();
            }

kthorngren

In general I see what that function is doing. But not sure if the problem is with the checkbox event handler that calls the function being overwritten or if there is something in your Datatables config that overwrites the elements that the function references. Someone with more Javascript experience may be able to say.

I put together a quick example to show how using Datatables Select and API's the same type of sum total can be displayed. Since you are using Datatables I would recommend using the Datatables API's if you can.

The table.on( 'select deselect', function () event is used any time a row is selected or deselected to update the Total. Other steps (like the last two) in your updateTotal() function can be added to this.

http://live.datatables.net/vinakeza/1/edit

However if you prefer to stay with what you have then you may want to post more info like how your Datatables is setup, the code that calls updateTotal(), etc. Or better yet post a link to your page or a test case showing the issue.

Kevin