Datatables- Omitting Certain Rows from Footer Calculation

Question

I have a table which calculates the total of all the rows in the footer. My question is, can I omit certain rows based on criteria.

For instance, I have season stats for a baseball player with their career total calculated at in the footer. This particular player played for two different teams in the 2018 season. This is indicated by TOTAL in the league LEAGUE field in which I have added his combined stats for each team that season. So looking at the table heres what you should notice:

He had 1 HITS for the 2017 season for STL

He had 15 HITS for the 2018 season (5 for LAD and 10 for BAL)

Given this, you should see that his career total in the footer was not counted correctly. He should have 16 career his, not 31. So in order to straighten this out I would like to omit all rows tha have a TOTAL in the LEAGUE column from being counted in the footer total. How would I do this? Any help here would be greatly appreciated. Thanks.

YEAR    Name        AGE  TEAM   LEAGUE   HITS   
2017    John Smith  25   STL    NL       1
2018    John Smith  26          TOTAL    15
2018    John Smith  26   LAD    NL       5
2018    John Smith  26   BAL    AL       10
        Career Total                     31

Here's my code

<div align="center">
         <table id = 'battingtbl' class="display compact nowrap">
        <thead>
            <tr>
                <th>YEAR</th>
                <th>NAME</th>
                <th>AGE</th>
                <th>TEAM</th>
                <th>LEAGUE</th>
                <th>HITS</th>
            </tr>
        </thead>
        <tbody>
        {% for stat in playerdata.bbhittingstatsmstr_set.all %}
            <tr>
                <td>{{ stat.year }}</td>
                <td>{{ stat.name }}</td>
                <td>{{ stat.age }}</td>
                <td>{{ stat.team }}</td>
                <td>{{ stat.league }}</td>
                <td>{{ stat.hits }}</td>
            </tr>
        {% endfor %}
        </tbody>
             <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
             </tfoot>
        </table>
                <script>
                    $(document).ready(function () {
                        $('#battingtbl').DataTable({
                            "searching": true,
                            "pageLength": 40,
                            "scrollX": true,
                            "paging": false,
                            "info": false,
                            drawCallback: () => {
                                const table = $('#battingtbl').DataTable();
                                const tableData = table.rows({
                                        search: 'applied'
                                    }).data().toArray();
                                const totals = tableData.reduce((total, rowData) => {
                                        total[0] += parseFloat(rowData[5]);          <!--HITS -->
                                        return total;
                                    }, [0,0,0,0,0,0]);
                                $(table.column(5).footer()).text(totals[0]);         <!--HITS -->
                            }
                        })
                    });
                </script>

Answer 1

Add an if statement into the tableData.reduce call:

const totals = tableData.reduce((total, rowData) => {
    if (rowData[4] !== 'TOTAL') {
        total[0] += parseFloat(rowData[5]);          <!--HITS -->
    }
    return total;
}, [0,0,0,0,0,0]);

$(table.column(5).footer()).text(totals[0]);         <!--HITS -->

Also you can simplify the initial value of the reduce call (the 3rd argument):

// totals is a Number not an Array
const totals = tableData.reduce((total, rowData) => {
    if (rowData[4] !== 'TOTAL') {
        total += parseFloat(rowData[5]);          <!--HITS -->
    }
    return total;
}, 0);

$(table.column(5).footer()).text(totals);