<div id="bdt"></div>
Rovnaké ako v základnom príklade...
<!-- SEARCHING -->
<p class="field">
<div class="control has-icons-left has-icons-right">
<bdt-filter @use-filter="setFilter" @reset-filter="resetFilter" title="Inline Filter" class="input" placeholder="search..." />
<span class="icon is-small is-left">
<i class="fa fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fa fa-magnifying-glass"></i>
</span>
</div>
</p>
<!-- TABLE WITH ref="bdt" -->
<table ref="bdt" border="1" class="table table-sm table-striped is-hoverable is-fullwidth">
<!-- FIX CELL WIDTH -->
<thead ref="toFix">
<tr>
<th align="right" width="100px">No.</th>
<!-- SHOW/HIDE, SORT -->
<th data-show="fld_ID,true" v-if="isShow('fld_ID')"><bdt-sort type="number" field="fld_ID" @sorting="sorting">ID</bdt-sort></th>
<th data-show="fld_Name,true" v-if="isShow('fld_Name')">
<bdt-sort field="fld_Name" @sorting="sorting">Name</bdt-sort>
</th>
<th data-show="fld_Ord,true" v-if="isShow('fld_Ord')" align="center">Ord</th>
<th width="50px">
<!-- 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="right"> {{ ((page -1) * limit) +index +1 }}. </td>
<td v-if="isShow('fld_ID')">{{ item.fld_ID }} </td>
<td v-if="isShow('fld_Name')">
<a href="#" @click.prevent="setFilter({fld_Name:[{k:'fld_Name', v:item.fld_Name}]})" title="setFilter(...)">{{ item.fld_Name }}</a>
</td>
<td v-if="isShow('fld_Ord')" align="center"> {{ item.fld_Ord }} </td>
<td align="center">
<!-- CHECKBOX ROW -->
<input type="checkbox" @change="checkedRow( index, 'fld_ID' )" v-model="item.checked">
</td>
</tr>
</tbody>
</table>
<div class="row middle">
<div class="4u">
<div class="btn-group">
<!-- LIMITS & PAGES -->
<bdt-limit :limit="limit" @set-limit="setLimit" class="select" width="3rem" />
<!-- SHOW / HIDE CONFIG BUTTON -->
<bdt-shows-config :shows="shows" class="btn btn-default btn-sm" title="Columns"><i class="fa fa-gear"></i></bdt-shows-config>
<!-- SHOW / HIDE CHECKED ROWS -->
<button :disabled="counts.checkedItems ? false : true" @click.prevent="addFilter({checked: [{'k': 'checked', 'v': true, 't': 'boolean'}]})" class="btn btn-sm btn-default" title="Show Checked"><i class="fa fa-check-square-o"></i></button>
<!-- UNCHECKED ROWS -->
<button v-if="counts.checkedItems" @click.prevent="unchecked()" class="btn btn-sm btn-default" title="unChecked All"><i class="fa fa-check-square-o has-text-danger"></i></button>
<!-- RESET FILTER -->
<button v-if="isFilter" @click.prevent="resetFilter()" class="btn btn-sm btn-danger" title="Reset Filter"><i class="fa fa-ban"></i> Reset Filter</button>
</div>
</div>
<div class="4u center">
<!-- COMPUTING -->
<small title="Page">{{ page }}</small> /
<small title="Pages">{{ pages }}</small> •
<small title="Items">{{ counts.filteredItems }}</small> /
<small title="Checked">{{ counts.checkedItems }}</small>
</div>
<div class="4u right">
<!-- PAGINATION -->
<bdt-pagination
width="3rem"
template="bootstrap"
:limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true"
@set-page="setPage" @set-limit="setLimit" />
</div>
</div>
import basicDataTable from '/library/js/basic-data-table/bdt.mjs'
import get from '/library/js/get.mjs'
const APP = 'path/to/your/app'
const items = await get(APP+'/json/simple-table.json')
const template = await get(APP+'/template/my-default-bdt.html')
const bdt = new basicDataTable({
id: 'bdtName',
selector: '#bdt',
isShadowRoot: false,
items,
template,
limit: 5,
funcs: {},
tmp: {},
onItems: ()=>{},
onFilter: ()=>{},
onChecked: ()=>{},
onPage: ()=>{},
clog: false
});