asked on

Dynamically Sum Up Each Column Inputs in DataTable

Hello Experts!

I need help on the following.

I have a DataTable populated via AJAX. There are four columns (CA1, CA2, CA3 and Exam) which need to be automatically calculated to give the Fifth Column (Total) as the user inputs values into each of the four textboxes.

CA1 is named cass1[]
CA2 is named cass2[]
CA3 is named cass3[]
Exam is named exam[]

As in attached:

Please help me look into this. I've searched with no luck.

I saw this but don't know how to manipulate it to suit my need.

$("table input").on('change blur input', function () {
    var row = $(this).closest('tr'),
        quantity = row.find('.quantity').val(),
        price = parseFloat(row.find('.price').text());

    row.find('.total').text(quantity * price);

    var sum = 0;
    $('.total').each(function () {
        sum += parseFloat($(this).text()) || 0;
    });

    $('.sum').text(sum);
});

Open in new window

Thank you in advance

Zakaria Acharki

Hi sir, happy to help again, this is what you're looking for :

$("table input").on('input', function () {
    var parent = $(this).closest('tr');
    var sum = 0;

    parent.find('input').not('#total').each(function(){
        sum += parseFloat($(this).val()) || 0;
    })

    parent.find('.total').val(sum);
});

Open in new window

Opeyemi AbdulRasheed

ASKER

Thank you for your concern, brother. Please look at my total textbox, I don't think I set it up well because it's not displaying any value.

{
    orderable: false,
    render: function (data, type, row) {
    return '<input class="form-control input-sm" type="text" maxlength="3" size="4" name="total[]" id="total[]" readonly="readonly" tabindex="-1">';
    }
 }

Open in new window

Zakaria Acharki

Yes then we need just to change two lines like :

$("table input").on('input', function () {
    var parent = $(this).closest('tr');
    var sum = 0;

    parent.find('input').not('#total[]').each(function(){
        sum += parseFloat($(this).val()) || 0;
    })

    parent.find('#total[]').val(sum);
});

Open in new window

Opeyemi AbdulRasheed

ASKER

Still no luck. Is there anyway I can debug this?

Zakaria Acharki

I think I got it try to attach the event like :

$("table").on('input', 'input', function () {

});

Open in new window

Opeyemi AbdulRasheed

ASKER

No luck

lenamtl

Hi,

I work with Datatables every day and you should use their editor if you plan to use it with form.
Otherwise you will have several problem to make it compatible with the plugins and cool feature like colreorder etc.
https://editor.datatables.net/

I am not saying it is not possible but it will required a lot of work...

Using Chrome right click Inspect and check if you have any errors in console

One of the problem with Datatables is apostrophe and HTML code can cause error when it is not well handled.

About the calculation you must also consider something to handle the case if the page get refreshed..
I would not calculate the total in the form but after when data are saved if possible, you can do it using PHP or any server side language for the calculation and this will be less issue this way.

Javascript is not reliable for calculation compare the PHP
http://php.net/manual/en/function.array-sum.php

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Opeyemi AbdulRasheed

ASKER

Hi AbdulRasheed, sorry for the delay

No problem brother
The code is working well but I'm sure due to the wrong information given above:

...There are four columns (CA1, CA2, CA3 and Exam) which need to be automatically calculated to give the Fifth Column (Total)...

The Total column is summing all columns together including the row idcolumn value from database.

A row.id with 446, when I entered value in one of the input boxes, the Total displays 446+new value.

I think we have to limit the sum to CA1, CA2, CA3 and Exam columns.

I hope this is possible.

Forgive me for stressing you unnecessarily.

Zakaria Acharki

Yes, sure we can, we will use the same principle using `.not()` for the id field too like :

parent.find('input').not("[name='total[]']").not("[name='id_input_name_here']").each(function() {

Open in new window

Opeyemi AbdulRasheed

ASKER

Superb! You're such a nice man and excellent developer. I'm so grateful. In fact, I feel like urging you. ):

Zakaria Acharki

Thanks AbdulRasheed, at all, I'm here to help with pleasure, just feel free to ask anytime...