Getting sum show up under column

ariley · December 2019

I have a basic setup that I added sum() to based on this: https://datatables.net/plug-ins/api/sum()#Examples

How do I make the sum show up under the column? It seems like it's part of the table now so adding a footer didn't help.

Thank you.
Agnes

kthorngren · December 2019

This example shows how to provide sums in the footer:
https://datatables.net/examples/advanced_init/footer_callback.html

Kevin

ariley · December 2019

I tried that but couldn't get it formatted.

Aka I couldn't get either show up properly.

kthorngren · December 2019

Make sure you have a -tag tfoot` defined in your HTML. If this doesn't help then please provide a test case showing what you are trying to do so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ariley · January 2020

I can't provide a webpage since I implemented this in FileMaker.

Please ignore the extra quotes in the code, since they are needed for FileMaker:

"data:text/html," &
"<HTML>

<head>
    <script type=\"text/javascript\" charset=\"utf8\" src=\"https://code.jquery.com/jquery-3.3.1.js\"> </script> <script
        type=\"text/javascript\" charset=\"utf8\"
        src=\"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js\"> </script> <script
        type=\"text/javascript\" charset=\"utf8\" src=\"https://cdn.datatables.net/plug-ins/1.10.20/api/sum().js\">
        </script> <link rel=\"stylesheet\" type=\"text/css\"
        href=\"https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css\"> <script type=\"text/javascript\">
        $(document).ready(function() { $('#example').DataTable({ pageLength: 50, drawCallback: function () { var
        api=this.api(); $( api.table().footer() ).html( api.column( 7, {page:'current'} ).data().sum() ); } }); });
        </script> <BODY>"
 &
$$HTML_CS & 
"<p>Legend: First call bonus = 3x, Call-back bonus = 2x</p>" & 
"<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Day</th>
            <th>Eval Approved 1st Call</th>
            <th>Eval Approved 1st Call Bonus</th>
            <th>Eval Approved Call Back</th>
            <th>Eval Approved Call Back Bonus</th>
            <th>Invoice Count</th>
            <th>Grand Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01/01/20</td>
            <td>Wednesday</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>01/02/20</td>
            <td>Thursday</td>
            <td>14</td>
            <td>42</td>
            <td>10</td>
            <td>20</td>
            <td>24</td>
            <td>86</td>
        </tr>
        <tr>
            <td>01/03/20</td>
            <td>Friday</td>
            <td>14</td>
            <td>42</td>
            <td>19</td>
            <td>38</td>
            <td>24</td>
            <td>104</td>
        </tr>
        <tr>
            <td>01/04/20</td>
            <td>Saturday</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>01/05/20</td>
            <td>Sunday</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>01/06/20</td>
            <td>Monday</td>
            <td>3</td>
            <td>9</td>
            <td>10</td>
            <td>20</td>
            <td>5</td>
            <td>34</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table></HTML>"

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · January 2020

I took your HTML table and built a test case for you:
http://live.datatables.net/qucuhobi/1/edit

I took the sum() example you linked to and performed the sum of column 3. the example overwrote the footer so I changed $( api.table().footer() ).html(...) to $( api.column(3).footer() ).html(...) to place the sum for column 3 in the footer of column 3.

I also added the FooterCallback example for column 4.

They both work, its your choice of which to use. If you still have difficulties please update the test case to show the problem.

Kevin

Getting sum show up under column

Getting sum show up under column

Answers

Howdy, Stranger!

Categories

DataTables

Getting sum show up under column

Getting sum show up under column

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables