Datatables- Getting the total when there are null values

Question

I'm using DataTables to calculate the all of the rows in the column and display the total in the footer of the table.

Here's the problem: It appears that whenever there is a null value in any of the rows of the column that I'm calculating, the total gets displayed as NaN.

How can I get DataTables to ignore the null values in the column and just total up the non-null values?

<div align="center">
     <table id = 'mytabl' class="display compact nowrap">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
    {% for num in numberdata.mytable_set.all %}
        <tr>
            <td>{{ num.col1 }}</td>
            <td>{{ num.col2 }}</td>
        </tr>
    {% endfor %}
    </tbody>
         <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
         </tfoot>
    </table>
            <script>
            $(document).ready(function() {
              $('#mytabl').DataTable({
                "searching": true,
                "pageLength": 40,
                "scrollX": true,
                "paging": false,
                "info": false,
                drawCallback: () => {
                  const table = $('#mytabl').DataTable();
                  const tableData = table.rows({
                    search: 'applied'
                  }).data().toArray();
                  const totals = tableData.reduce((total, rowData) => {
                    total[0] += parseFloat(rowData[1]);
                    total[1] += parseFloat(rowData[2]);
                    return total;
                  }, [0, 0]);
                  $(table.column(1).footer()).text(totals[0]);
                  $(table.column(2).footer()).text(totals[1]);
                }
              })
            });
            </script>

try changing from rowData[1] to +rowData[1]......

gaetanoM
– gaetanoM

2019-06-04 21:08:48 +00:00
Commented Jun 4, 2019 at 21:08 — gaetanoM
– gaetanoM, Commented Jun 4, 2019 at 21:08
This is probably the best/easiest way to do it ^

Nick T
– Nick T

2019-06-04 21:31:59 +00:00
Commented Jun 4, 2019 at 21:31 — Nick T
– Nick T, Commented Jun 4, 2019 at 21:31

Dave Keane · Accepted Answer · 2019-06-04 21:09:20Z

1

const totals = tableData.reduce((total, rowData) => {
                total[0] += rowData[1] ? parseFloat(rowData[1]) : 0;
                total[1] += rowData[2] ? parseFloat(rowData[2]) : 0;
                return total;
              }

How bout this if the value is null add zero

answered Jun 4, 2019 at 21:09

Dave Keane

7278 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick T Over a year ago

That works pretty well. And is there a way to hide the total from being displayed if all rows in the column are null?

Collectives™ on Stack Overflow

Datatables- Getting the total when there are null values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related