Pagination เพิ่มใน TableView

src/components/TableView.vue

@@ -226,10 +226,9 @@
       :virtual-scroll-sticky-size-start="48"
       dense
       :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+      v-model:pagination="pagination"
     >
-      <!-- :pagination="initialPagination" -->
+      <!-- :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" -->
       <!-- :rows-per-page-options="[0]" -->
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -245,6 +244,17 @@
           />
         </q-tr>
       </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="pagination.page"
+          color="grey-8"
+          :max="scope.pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
       <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
@@ -313,19 +323,37 @@
   </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
-
+const rows = ref<any>([]);
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const modalPublish = ref<boolean>(false);
 const modalDelete = ref<boolean>(false);
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -429,12 +457,6 @@ const updateVisibleFilter = (value: any) => {
   emit("update:inputvisibleFilter", value);
 };
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  else return start + "-" + end + " ใน " + total;
-};
-
 const checkSave = () => {
   props.validate();
   props.save();