数据表-从页脚计算中省略某些行

时间:2019-05-30 18:44:30

标签: javascript jquery datatables

我有一个表,用于计算页脚中所有行的总数。我的问题是,我可以根据条件忽略某些行吗?

例如,我有一个棒球运动员的赛季统计数据,其职业生涯总数据位于页脚。 这位特殊的球员在2018赛季效力于两支不同的球队。在TOTAL联盟的LEAGUE字段中可以看出这一点,我在其中添加了该赛季每支球队的综合统计数据。 因此,在此查看表格,您应该注意以下几点:

他在HITS的2017赛季有1个STL

他在2018赛季有15个HITS(5个为LAD和10个为BAL

鉴于此,您应该看到他在页脚中的职业总数未正确计算。他应该有16个职业,而不是31个。 因此,为了弄清楚这一点,我想忽略在页脚总数中TOTAL列中有LEAGUE的所有行。我该怎么做?在这里的任何帮助将不胜感激。谢谢。

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

这是我的代码

<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>

1 个答案:

答案 0 :(得分:1)

tableData.reduce调用中添加if语句:

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 -->

您还可以简化reduce调用的初始值(第3个参数):

// 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);