Calculate Σ
<div id="basicdatatable"></div>
Rovnaké ako v základnom príklade...
<table border="1" width="100%" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Name</th>
<th><input type="checkbox" @change="checkedAll('fld_ID', checkAll)" v-model="checkAll" /></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in pageItems" :key="item.fld_ID">
<td align="center"> {{ ((page -1) * limit) +index +1 }}. </td>
<td> {{ item.fld_ID }} </td>
<td> {{ item.fld_Name }} </td>
<td align="center"> <input type="checkbox" @change="checkedRow( index, 'fld_ID' )" v-model="item.checked"> </td>
</tr>
</tbody>
</table>
<br>
<!-- CALCULATE -->
<ul style="columns:2 calc(300px - 1em); max-width:600px;">
<li><b>Page:</b>
<ul>
<!-- PAGE -->
<li>All pages: {{ pages }}</li>
<li>Actual page: {{ page }}</li>
<li>Limit of page: {{ limit }}</li>
</ul>
<br>
</li>
<li><b>Data (Items):</b>
<ul>
<!-- COUNTS ITEMS -->
<li>All: {{ counts.items }}</li>
<li>Filtered: {{ counts.filteredItems }}</li>
<li>On Page: {{ counts.pageItems }}</li>
<li>Checked: {{ counts.checkedItems }}</li>
</ul>
</li>
<li><b>SUM (Items / ID):</b>
<ul>
<!-- SUM OF COLUMNS -->
<!-- A better method is an indirect query with debounce -->
<li>All: <span :call="sum('origItems', 'fld_ID', 'sumOID')"> {{ tmp.sumOID }}</span></li>
<li>Filtered: <span :call="sum('filteredItems', 'fld_ID', 'sumFID')"> {{ tmp.sumFID }}</span></li>
<li>On Page: <span :call="sum('pageItems', 'fld_ID', 'sumPID')"> {{ tmp.sumPID }}</span></li>
<li>Checked: <span :call="sum('checkedItems', 'fld_ID', 'sumCID')"> {{ tmp.sumCID }}</span></li>
</ul>
</li>
<li><b>AVG (Items / ID):</b>
<ul>
<!-- AVERAGE OF COLUMNS -->
<!-- A better method is an indirect query with debounce -->
<li>All: <span :call="avg('origItems', 'fld_ID', 'avgOID')"> {{ tmp.avgOID }}</span></li>
<li>Filtered: <span :call="avg('filteredItems', 'fld_ID', 'avgFID')"> {{ tmp.avgFID }}</span></li>
<li>On Page: <span :call="avg('pageItems', 'fld_ID', 'avgPID')"> {{ tmp.avgPID }}</span></li>
<li>Checked: <span :call="avg('checkedItems', 'fld_ID', 'avgCID')"> {{ tmp.avgCID }}</span></li>
</ul>
</li>
</ul>
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"
const bdt = new basicDataTable({
id: "bdtBex",
selector: "#basicdatatable",
items: data,
template: template,
limit: 3
});