Можно ли отобразить сумму записей на основе длины страницы в DataTables - PullRequest
Новая
       19

Можно ли отобразить сумму записей на основе длины страницы в DataTables

0 голосов
/ 15 марта 2019

Я использую плагин DataTables. Я хочу отобразить промежуточный итог страницы на каждой странице в зависимости от длины страницы, выбранной в раскрывающемся списке. Если выбрана опция 25, а в таблице всего 35 записей, то в первом блоке нумерации страниц должна отображаться сумма первых 25 записей, а затем сумма оставшихся 10 записей.

1 Ответ

0 голосов
/ 15 марта 2019

Ваша задача может быть легко выполнена с использованием метода .column().data(), который позволяет вам получить доступ к произвольным данным столбца, чтобы манипулировать ими любым удобным для вас способом, учитывая, что длина страницы DataTable доступна через .page.len() метод.

Ниже приведена живая демонстрация этой концепции: 

//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>
...