Hi,

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

Thank you for your reply

Can you help me that how can I change this with a dynamic number in TableFooter.vue?

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>

Modern it security solutions are provided by Deltaroot to protect your digital assets. Strong defense against cyber attacks in both IT and OT settings is ensured by our customized strategy. Put your trust in Deltaroot for complete security and comfort in an ever-changing online environment.