User Defined Function
Hint: After editing, it is possible to use ".item=..." to change only 1 row in the table. (Instead of using an update of the entire table.)
<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>fn</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">
<!-- USER FUNCTION -->
<button @click="funcs('myEditFunction', item, index)">Edit</button>
</td>
</tr>
</tbody>
</table>
<!-- PAGINATION -->
<bdt-pagination width="2.5em" :limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true" @set-page="setPage" @set-limit="setLimit" />
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,
// user defined function
funcs:
{
myEditFunction: ( ary, index ) =>
{
alert( `ID = ${ary.fld_ID} \nIndex of row = ${index}\nFor any data look console...` )
console.log( 'index: ', index )
console.table( 'ary: ', ary )
// Update only one row in the table
ary.fld_Name += ' ...is change'
bdt.item = { i:index, k:'fld_ID', v:ary }
// or
// bdt.item = { k:'fld_ID', v:ary }
// or
// bdt.item = { k:'fld_ID', v:{fld_Name:ary.fld_Name} }
}
}
});