Checkbox
<div id="basicdatatable"></div>
Rovnaké ako v základnom príklade...
<!-- SEARCHING -->
<p>Universal search: <bdt-filter @use-filter="setFilter" @reset-filter="resetFilter" title="Inline Filter" placeholder="search..." /></p>
<table border="1" width="100%" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>No.</th>
<th><bdt-sort type="number" field="fld_ID" @sorting="sorting">ID</bdt-sort></th>
<th><bdt-sort field="fld_Name" @sorting="sorting">Name</bdt-sort></th>
<th>
<!-- CHECKBOX ALL -->
<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">
<!-- CHECKBOX ROW -->
<input type="checkbox" @change="checkedRow( index, 'fld_ID' )" v-model="item.checked">
</td>
</tr>
</tbody>
</table>
<div align="right">
<!-- PAGINATION -->
<bdt-pagination width="2.5em" :limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true" @set-page="setPage" @set-limit="setLimit" />
</div>
<br>
<!-- CALCULATE -->
<ul>
<li><b>Data (Items) Checked :</b>
<ul>
<li>All: {{ counts.items }}</li>
<li>Filtered: {{ counts.filteredItems }}</li>
<li>On Page: {{ counts.pageItems }}</li>
<li>Checked: {{ counts.checkedItems }}</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: 5,
});