Bootstrap table footer functions not working data-footer-formatter

Question

I've been strugling with this for a few days and I can't manage to get it work.

In bootstrap table, when I can't get footer functions to work. It seems that the function is never call. But beside that the function works perfectly.

This is what I get at the bottom of the page.This is what I get at the bottom of the page

Here is my code:

   	$('#table_calcularIngresos').bootstrapTable({


});


function footerStyle(row, index) {
  return {
    css: {
      "font-weight": "bold"
    }
  };
};

function totalTextFormatter(data) {
  return 'Total ingresado: $';
}



function sumFormatter(data) {
    field = this.field;
    return data.reduce(function(sum, row) { 
        return sum + (+row[field]);
    }, 0);
}

    
	<table id="table_calcularIngresos"
           data-search="true"
           data-show-refresh="false"
           data-show-toggle="false"
           data-show-columns="false"
           data-show-export="false"
           data-card-view="false"
           data-minimum-count-columns="2"
           data-pagination="true"
           data-show-pagination-switch="false"
           data-page-list="[10, 25, 50, 100, ALL]"
           data-show-footer="true"
           data-footer-style="footerStyle"
           data-url="../data/ajax.php?tipo=bienes"
           >
           
           
		<thead>
			<tr>
				<th data-field="cup_numero" data-footer-formatter="totalTextFormatter">Cupon Numero</th>
				<th data-field="cliente_apellido">Apellido</th>
				<th data-field="cliente_nombre">Nombre</th>
				<th data-field="cliente_dni">DNI</th>
				<th data-field="bien_marca">Marca</th>
				<th data-field="bien_modelo">Modelo</th>
				<th data-field="cup_fecha_pago">Fecha pago</th>
				<th data-field="cup_costo" data-footer-formatter="sumFormatter">Monto</th>
				<th data-field="es_nombre_corto">Compa&ntilde;&iacute;a</th>
			</tr>
		</thead>
           
           
	</table>

Answer 1

This to me looks like a scope problem. I assume the formatters must be made available on the global scope in case the data-footer-formater attribute is used to set the formatter.

I adapted a formatter example below. The globally available formatter works. The private formatter doesn't, displaying the same problem as you've described.

function globalPriceSumFormatter(items) {
  var totalPrice = 0;

  items.forEach(function(item) {
    totalPrice = totalPrice + item.price;
  });

  return totalPrice;
}

(function() {
  function privatePriceSumFormatter(items) {
    var totalPrice = 0;

    items.forEach(function(item) {
      totalPrice = totalPrice + item.price;
    });

    return totalPrice;
  }
})();


function dollarCurrencyFormatter(value) {
  return "$" + value;
}

var items = [{
    "id": 0,
    "name": "Item 0",
    "price": 0
  },
  {
    "id": 1,
    "name": "Item 1",
    "price": 1
  },
  {
    "id": 2,
    "name": "Item 2",
    "price": 2
  },
  {
    "id": 3,
    "name": "Item 3",
    "price": 3
  }
];

$("#bootstrapTable").bootstrapTable({
  data: items
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>

<div class="container">
  <h1>Footer formatter</h1>
  <p>Use <code>footer-formatter</code> column option to format the display of bootstrap table column footer.</p>
  <table id="bootstrapTable" data-data="items" data-show-footer="true">
    <thead>
      <tr>
        <th data-field="id" data-formatter="ID: %s">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price" data-formatter="dollarCurrencyFormatter" data-footer-formatter="globalPriceSumFormatter">Item Price</th>
        <th data-field="price" data-formatter="dollarCurrencyFormatter" data-footer-formatter="privatePriceSumFormatter">Item Price 2</th>
      </tr>
    </thead>
  </table>
</div>