Question

我正在使用DataTables插件。我想根据下拉列表中选择的页面长度在每个页面上显示页面小计。如果选择的选项是25，并且表中总共有35个条目，则在第一个分页块上，应显示前25个条目的总和，然后显示其余10个条目的总和。

Answer 1

您可以使用.column().data()方法轻松完成您的任务，该方法允许您访问任意列数据以任何您想要的方式进行操作，同时请记住可以通过.page.len()访问DataTable页面长度方法。

以下是该概念的实时演示：

//DataTable filled with random data
const dataTable = $('#mytable').DataTable({
  data: [...Array(15)].map(item => {
	  const row = {};
	  row.code = [...Array(10)].map(() => String.fromCharCode(Math.floor(Math.random()*(90-65))+65)).join('');
	  row.qty = Math.floor(Math.random()*10);
	  return row;
  }),
  columns: [
    {title: 'item code', data: 'code'},
    {title: 'qty', data: 'qty'}
  ]
});
//append tfoot to display subtotals
const getTotals = () => {
	const totals = {};
	totals.pageTotal = dataTable.column(1).data().toArray().slice(0,dataTable.page.len()).reduce((sum, item) => sum+=item,0);
	totals.remainderTotal = dataTable.column(1).data().toArray().slice(dataTable.page.len()).reduce((sum, item) => sum+=item,0);
	return totals;
};
$('#mytable').append(`<tfoot><tr><td colspan="2" align="right"><span>First page total / the rest of the table total: </span><span id="totals">${getTotals().pageTotal} / ${getTotals().remainderTotal}</span></td></tr></tfoot>`)
//Listen for row span change
$('body').on('change', '.dataTables_length select', function(){
	$('#totals').text(getTotals().pageTotal+' / '+getTotals().remainderTotal);
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

是否可以根据数据表中的页面长度显示条目的总和

1 个答案: