:current:page not working in updated theme's datatable
I have used the updated theme's ktdatatable and I want to set the current page dynamic.
I have used :current-page="2" but not working and it's set 1st page by default event I have set 2 in current page parameter.
Waiting for your reply
Thank you!
Replies (5)
As I say in previous question I have used ktdatatable with updated themes so there is no any el-pagination component.
Please check my TableFooter.vue file below
<template>
<div class="row">
<TableItemsPerPageSelect
v-model:itemsPerPage="itemsCountInTable"
:items-per-page-dropdown-enabled="itemsPerPageDropdownEnabled"
/>
<TablePagination
v-if="pageCount > 1"
:total-pages="pageCount"
:total="count"
:per-page="itemsPerPage"
:current-page="page"
@page-change="pageChange"
/>
</div>
</template>
<script lang="ts">
import TableItemsPerPageSelect from "@/components/kt-datatable/table-partials/table-content/table-footer/TableItemsPerPageSelect.vue";
import TablePagination from "./table-content/table-footer/TablePagination.vue";
import {
computed,
defineComponent,
onMounted,
ref,
WritableComputedRef,
watch,
} from "vue";
export default defineComponent({
name: "table-footer",
components: {
TableItemsPerPageSelect,
TablePagination,
},
props: {
count: { type: Number, required: false, default: 5 },
itemsPerPage: { type: Number, default: 5 },
itemsPerPageDropdownEnabled: {
type: Boolean,
required: false,
default: true,
},
},
emits: ["update:itemsPerPage", "page-change"],
setup(props, { emit }) {
const page = ref(1);
const inputItemsPerPage = ref(5);
watch(
() => props.count,
() => {
page.value = 1;
}
);
watch(
() => inputItemsPerPage.value,
() => {
page.value = 1;
}
);
onMounted(() => {
inputItemsPerPage.value = props.itemsPerPage;
});
const pageChange = (newPage: number) => {
page.value = newPage;
emit("page-change", page.value);
};
const itemsCountInTable: WritableComputedRef<number> = computed({
get(): number {
return props.itemsPerPage;
},
set(value: number): void {
inputItemsPerPage.value = value;
emit("update:itemsPerPage", value);
},
});
const pageCount = computed(() => {
return Math.ceil(props.count / itemsCountInTable.value);
});
return {
pageChange,
pageCount,
page,
itemsCountInTable,
inputItemsPerPage,
};
},
});
</script>
Hi,
el-pagination is an element-plus component, you don't need to import it, it should be available globally in all components.
Please check element-plus pagination component doc:
https://element-plus.org/en-US/component/pagination.html
Thank you for your reply
Can you help me that how can I change this with a dynamic number in TableFooter.vue?
Here is an example, you can just paste it into your TableFooter.vue
<el-pagination
:hide-on-single-page="true"
:current-page="page"
:page-size="itemsPerPage"
:total="count"
@current-change="pageChange"
small
background
layout="prev, pager, next"
class="mt-4"
></el-pagination>Also, you will need to update the page variable assign in TableFooter component.
page.value = 1; //set here a default pagination value or use data from propsHi,
Since now in our table component, we are using a custom pagination component, this property was temporarily removed, in the next Metronic v8.1.2 we will return it.
For now you can use element-plus pagiantion component as a temprary solution, you can change component in file kt-datatable/table-partials/TableFooter.vue.
Check element-plus pagination examples in the official doc:
https://element-plus.org/en-US/component/pagination.html
