Error adding a column - $NaN ( $NaN total)

jsaenz · December 2019

Here js:

  <script>
    $(document).ready(function() {
    $('#table_id').DataTable( {
        "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( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
  } );
  </script>

HERE php:

          <table class="table table-striped TB display  table-sm" id="table_id">
            <thead>
              <tr class="bg-primary">
                <th style="font-family: Quicksand; font-size: 14px;"><strong>N</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Fecha</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Nombre</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Descripcion</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Cantidad</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Precio</strong></th>
                <th style="font-family: Quicksand; font-size: 14px;"><strong>Total</strong></th>

                <th style="font-family: Quicksand; font-size: 9px;">Editar - Imprimir - Eliminar</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                  <th colspan="4" style="text-align:right">Total:</th>
                  <th></th>
              </tr>
            </tfoot>
            <tbody>

            <?php

            $verF = new FacturasC();
            $verF -> VerFacturasC();

            $item = null;
            $valor = null;

            $editarF = FacturasC::EFacturasC($item, $valor);


            ?>
              
            </tbody>
          </table>

PIC:

THANKS

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

kthorngren · December 2019

I copied your footerCallback code into this test case and it works:
http://live.datatables.net/morayuvu/1/edit

In order to help we will need to see your page or a test case replicating the issue. This will allow us to see your specifc data to determine the problem. You can update my test case if you like.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

If you are unable to provide a test case then use console.log statements to debug what is happening in the intVal function. Likely the i.replace(/[\$,]/g, '')*1 statement needs updated to reflect your specific data.

Kevin

jsaenz · December 2019

Thanks, here my code

jsaenz · December 2019

what I need is to be able to add all the rows of the Total column and show them in the footer of the table

jsaenz · December 2019

I'm sorry I can't use livedatatable but I'm new to this datatable

jsaenz · December 2019

Thanks, here my plantilla.php:

<?php session_start(); ?>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Administración</title>

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

</head>

<?php if(isset($_SESSION["Ingreso"]) && $_SESSION["Ingreso"] == true){ echo '<div class="wrapper">'; include "modulos/cabecera.php"; include "modulos/menu.php"; if(isset($_GET["url"])){ if($_GET["url"] == "inicio" || $_GET["url"] == "ingreso" || $_GET["url"] == "usuarios" || $_GET["url"] == "salir" || $_GET["url"] == "perfil" || $_GET["url"] == "slide" || $_GET["url"] == "nosotros" || $_GET["url"] == "servicios" || $_GET["url"] == "productos" || $_GET["url"] == "galeria" || $_GET["url"] == "facturas" || $_GET["url"] == "facturacion" || $_GET["url"] == "gastos" || $_GET["url"] == "mensajes" || $_GET["url"] == "suscriptores" || $_GET["url"] == "inicio" || $_GET["url"] == "dinero" ){ include "modulos/".$_GET["url"].".php"; } }else{ include "modulos/inicio.php"; } echo ''; }else{ include "modulos/ingreso.php"; } ?>

$.widget.bridge('uibutton', $.ui.button);

$(document).ready(function() { $('#table_id').DataTable( { "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)' ); } } ); } ); function imprim1(imp1){ var printContents = document.getElementById('imp1').innerHTML; w = window.open(); w.document.write(printContents); w.document.close(); // necessary for IE >= 10 w.focus(); // necessary for IE >= 10 w.print(); w.close(); return true;}

</body>
</html>

colin · December 2019

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Error adding a column - $NaN ( $NaN total)

Error adding a column - $NaN ( $NaN total)

Answers

Howdy, Stranger!

Categories

DataTables

Error adding a column - $NaN ( $NaN total)

Error adding a column - $NaN ( $NaN total)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables