Question

我一直在为此苦苦挣扎几天，我无法让它发挥作用。

在bootstrap表中，当我无法使页脚功能工作时。似乎该函数永远不会调用。但除此之外，该功能完美无缺。

这是我在页面底部得到的内容。This is what I get at the bottom of the page

这是我的代码：

   	$('#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

这对我来说看起来像是一个范围问题。我假设格式化程序必须在全局范围内可用，以防data-footer-formater属性用于设置格式化程序。

我在下面修改了一个格式化程序示例。全球可用的格式化器工作。私有格式化程序没有，显示与您描述的相同的问题。

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>

Bootstrap表页脚功能不起作用数据页脚格式化程序

1 个答案: