: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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

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?

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 props

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





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 = 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,
};
},
});

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(