Footer Totals

Glyndwr · August 2018

I would like a running total; however, my readings suggest this is not possible. So I will go with footer totals instead; however, yes you guessed it, I can not get it to work. The table is displayed; however, the totals are not displayed.

My HTML:

    <html>
    <head>
        <title>Hike List</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="A Scout award tracking application">
        <meta name="author" content="Glyndwr (Wirrin) Bartlett">

        <!-- JQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

            <!-- Validate -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

            <!-- Bootstrap -->
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

            <!-- Bootstrap Date Picker-->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>    
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

            <!-- DataTables -->
            <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


            <!-- Le styles -->
            <!-- Bootstrap -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

            <!-- DataTables -->
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
            <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

        <style type="text/css">
          body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
          }
          . {
            max-width: 370px;
            padding: 1px 1px 1px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
                    border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
               -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                    box-shadow: 0 1px 2px rgba(0,0,0,.05);
          }

          .form-select {
            max-width: 100%;
            padding: 19px 29px 29px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
                    border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
               -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                    box-shadow: 0 1px 2px rgba(0,0,0,.05);
          }
          .form-signin .form-heading,
          .form-signin .checkbox {
            margin-bottom: 10px;
          }
          .form-signin input[type="text"],
          .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
          }
          .myheader {
            display:flex;
            text-align: center;
          }
          .myimg {
            width: 130px;
            height: auto;
          }
          .pull-right {
            text-align: right;
          }

            /* Tooltip container */

            /* Tooltip text */
            .tooltiptext {
                visibility: hidden;
                width: 120px;
                background-color: #555;
                color: #fff;
                text-align: center;
                padding: 5px 0;
                border-radius: 6px;

                /* Position the tooltip text */
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -60px;

                /* Fade in tooltip */
                opacity: 0;
                transition: opacity 1s;
            }

            /* Tooltip arrow */
            .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

            /* Show the tooltip text when you mouse over the tooltip container */
            .tooltiptext {
                visibility: visible;
                opacity: 1;
            }

        </style>
        <link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="resources/js/html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->

      </head>

      <body>

        <div id="hikeList"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');"> 

            <div id="includedContent"></div>

            <form data-toggle="validator" role="form" id="showActivityTableForm">
                <div class="row">
                    <div class="container-fluid">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="jumbotron">
                                <h3>Hike List</h3>

                                <div class="input-group">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-1 text-right">   
                                        <div class="submit">
                                          <a id="addActivity" class="btn btn-primary" data-toggle="collapse">Add Activity</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="container" id=activity>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <table class="table table-hover table-bordered" id="activityTable">
                                            <thead>
                                                <tr>
                                                  <th>Start Date</th>
                                                  <th>End Date</th>
                                                  <th>Objective - Location (From - Via - To)</th>
                                                  <th>Type of Hike</th>
                                                  <th>Actual KM</th>
                                                  <th>Offset</th>
                                                  <th>KM Counted</th>
                                                  <th>Nights Under Canvas</th>
                                                  <th>Update / Delete / Details / Meals</th>
                                                </tr>
                                            </thead>
                                            <tbody id="activityTablebody">
                                            </tbody>

                                            <tfoot>
                                                <tr>
                                                    <th colspan="6" style="text-align:right">Page Total: </th>
                                                </tr>
                                            </tfoot>

                                        </table>

                                        <div style="text-align: center;">
                                            <span id="ajaxGetUserServletResponse1" style="color: red;"></span>
                                        </div>
                                    </div>

                                </div><!-- /container -->

                            </div>
                        </div>
                    </div>
                </div><!-- /row -->

                <div style="text-align: center;">
                    <span id="ajaxGetUserServletResponse" style="color: red;"></span>
                </div>
            </form>
        </div> <!-- /container -->

        <div id="ajaxGetUserServletResponse"></div>

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
        <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

        <script src="js/hikeList.js"></script>

      </body>
    </html>

Glyndwr · August 2018

My js:

    $(document).ready(function(){
        $("#includedContent").load("Menu.html");

        $('[data-toggle="tooltip"]').tooltip();

        displayActivities();

    }); // end document.ready

    function displayActivities() {
        $('#ajaxGetUserServletResponse1').text('');

        if ( $.fn.dataTable.isDataTable( '#activityTable' ) ) {
            var activityTable = $('#activityTable').DataTable();
        }
        else {
            var activityTable = $('#activityTable').DataTable( {

                "info":     false,
                dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                columns: [
                          {data: 'hrStartDate'},
                          {data: 'hrEndDate'},
                          {data: 'hrLocation'},
                          {data: 'hrType'},
                          {data: 'hrActualKM'},
                          {data: 'hrOffset'},
                          {data: 'hrKilometres'},
                          {data: 'hrNightsUnderCanvas'},
                          {
                              data: null,
                              className: "center",
                              defaultContent: '<a href="" class="editor_update">Update</a> / <a href="" class="editor_delete">Delete</a> / <a href="" class="editor_details">Details</a> / <a href="" class="editor_meals">Meals</a>'
                          }
                         ],

                 "footerCallback": function ( row, data, start, end, display ) {
                     var api = this.api(), data;

                     // Remove the formatting to get integer data for summation
                     var intVal = function ( i ) {
                         return typeof i === 'string' ?
                             i.replace(/[\$,]/g, '')*1 :
                             typeof i === 'number' ?
                                 i : 0;
                     };

                     // Total over all pages
                     total = api
                         .column( 6 )
                         .data()
                         .reduce( function (a, b) {
                             return intVal(a) + intVal(b);
                         }, 0 );

                     // Total over this page
                     pageTotal = api
                         .column( 6, { page: 'current'} )
                         .data()
                         .reduce( function (a, b) {
                             return intVal(a) + intVal(b);
                         }, 0 );

                     // Update footer
                     $( api.column( 6 ).footer() ).html(
                         '$'+pageTotal +' ( $'+ total +' total)'
                     );
                 },

            } );
        }


        //Joined
        $.ajax({
            url : 'HikeListView', // Your Servlet mapping or JSP(not suggested)
            data : {
                ssYMID : sessionStorage.getItem('ssYMID'),
            }, 
            type : 'POST',
        })
        .fail (function(jqXHR, textStatus, errorThrown) {
    //      alert(jqXHR.responseText);
            if(jqXHR.responseText.includes('No Hikes')){
                $('#ajaxGetUserServletResponse1').text('No Hikes.');
            }else{
                $('#ajaxGetUserServletResponse1').text('Error getting Hikes.');
            }
            $("#startDate").focus();
        })
        .done(function(responseJson1a){
            // JSON response to populate the activities table
            dataType: "json";

    //      alert(JSON.stringify(responseJson1a)); 
    //      Result of alert is:
    //          [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
            activityTable.clear();
            activityTable.rows.add(responseJson1a).draw();
        })
    }

    $('#hikeUpdate').click(function(){        
        window.location = "HikeUpdate.html";
    });

Glyndwr · August 2018

kthorngren · August 2018

My guess is you are putting the results in the wrong tfoot column. You have:

                                        <tfoot>
                                            <tr>
                                                <th colspan="6" style="text-align:right">Page Total: </th>
                                            </tr>
                                        </tfoot>

and

                 // Update footer
                 $( api.column( 6 ).footer() ).html(
                     '$'+pageTotal +' ( $'+ total +' total)'
                 );

With colspan=6 I believe the first 6 columns will be column(0). I think you will need to change the update to this:

                 // Update footer
                 $( api.column( 1 ).footer() ).html(
                     '$'+pageTotal +' ( $'+ total +' total)'
                 );

Kevin

Glyndwr · August 2018

Hi Kevin,

Thank you very much for your help. Your answer is close but not quite. The quick answer is add a "<th></th>" for each total you want to display. In hindsight this is obvious to me:

<tr>
  <th colspan="6" style="text-align:right">Page Total: </th>
  <th></th>
</tr>

For the sake of anyone else who has this issue I will take you through my process.

I tried Kevin's answer and the total appeared in column 1 replacing "Page Total:". So I tried replacing 1 with 2 then 3 until 5. They all appeared in column 1. I first thought there was a cashe issue, I have had this in the past where code has not worked, so I cleared the cashe each time and made sure the war and build were deleted before loading the new war. No luck. So then I tried 6 again and the total was not displayed. This is when the penny dropped! Where is it being placed? Of course there is no where for it to be displayed so add a "<th></th>".

If you want to display a total in 6 and 8 you will need three "<th></th>". The middle one will remain empty.

I hope this helps someone else.

Once again thank you Kevin for getting my thought process going.

kthorngren · August 2018

The quick answer is add a "<th></th>" for each total you want to display.

Yes, I missed that point. Thanks for the update. Glad you got it working.

Kevin

Footer Totals

Footer Totals

Answers

Howdy, Stranger!

Categories

DataTables

Footer Totals

Footer Totals

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables