BDT - pagination

Basic Data Table

v 2.1.2

Pagination « № »

Bulma style

Bootstrap style

User Defined Template

<div id="basicdatatable"></div>
<table border="1" width="100%" cellspacing="0" cellpadding="3">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</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>
		</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" />

Bulma style

<!-- link for template if basic-data-table isShadowRoot === true -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
...
<!-- PAGINATION -->
<bdt-pagination width="5em" template="bulma" :limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true" @set-page="setPage" @set-limit="setLimit" />

Bootstrap style

<!-- link for template if basic-data-table isShadowRoot === true -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
...
<!-- PAGINATION -->
<bdt-pagination width="5em" template="bootstrap" :limit="limit" :page="page" :pages="pages" :btn-final="true" :btn-once="true" @set-page="setPage" @set-limit="setLimit" />

User Defined Template

...
<!-- PAGINATION -->
<!--
	bdtPaginationTemplate must write to localStorage
	before import basicDataTable class
	Look JS for detail
 -->
<bdt-pagination width="5em" template="bdtPaginationTemplate" :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 Template

<!--
	bdtPaginationTemplate must write to localStorage
	before import basicDataTable class
 -->
<script type="module">
	localStorage.setItem('bdtPaginationTemplate',`<div v-if="pages > 1" class="bdt-pagination">
  <button v-if="btnFinal" @click="changePage( 1 )" :disabled="page === 1"><span><i class="fa-regular fa-face-smile"></i> Fist</span></button>
  <button v-if="btnOnce" @click="changePage( page -1 )" :disabled="page === 1"><span>Prev</span></button>
  <input type="number" @change="changePage( newPage )" v-model="newPage" min="1" :max="pages" :style="'width:' + width" />
  <button v-if="btnOnce" @click="changePage( page +1 )" :disabled="page === pages"><span>Next</span></button>
  <button v-if="btnFinal" @click="changePage( pages )" :disabled="page === pages"><span>Last <i class="fa-regular fa-face-laugh-wink"></i></span></button>
</div>`)
</script>

<script type="module">
	import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"

	const bdt = new basicDataTable({
		...
	});
</script>