Frontend Pagination

In this approach, the backend delievrs all data to the frontend, and pagination is handled client-side.

<template>
  <div class="flex items-center justify-center mt-5">
    <el-pagination 
      background 
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 3, 4, 5]"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const allData = ref([])
const currentPage = ref(1)
const pageSize = ref(2)
const totalItems = ref(0)
const background = ref(false)
const disabled = ref(false)
const paginatedData = ref([])

function loadAllData() {
  allData.value = [
    { id: 1, title: "title01", content: "content01", addTime: "2024-01-03" },
    { id: 2, title: "title02", content: "content02", addTime: "2024-01-03" },
    { id: 3, title: "title03", content: "content03", addTime: "2024-01-03" },
    { id: 4, title: "title04", content: "content04", addTime: "2024-01-03" },
    { id: 5, title: "title05", content: "content05", addTime: "2024-01-03" },
    { id: 6, title: "title06", content: "content01", addTime: "2024-01-03" },
    { id: 7, title: "title07", content: "content02", addTime: "2024-01-03" },
    { id: 8, title: "title08", content: "content03", addTime: "2024-01-03" },
    { id: 9, title: "title09", content: "content04", addTime: "2024-01-03" },
    { id: 10, title: "title10", content: "content05", addTime: "2024-01-03" },
    { id: 11, title: "title11", content: "content01", addTime: "2024-01-03" },
    { id: 12, title: "title12", content: "content02", addTime: "2024-01-03" },
    { id: 13, title: "title13", content: "content03", addTime: "2024-01-03" },
    { id: 14, title: "title14", content: "content04", addTime: "2024-01-03" },
    { id: 15, title: "title15", content: "content05", addTime: "2024-01-03" }
  ]
  totalItems.value = allData.value.length
}

function updatePagination() {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  paginatedData.value = allData.value.slice(startIndex, endIndex)
}

const handlePageSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
  updatePagination()
}

const handlePageChange = (newPage) => {
  currentPage.value = newPage
  updatePagination()
}

loadAllData()
updatePagination()
</script>

Backend Pagination

In this method, the frontend sends pagination parameters to the backend, which then returns the appropriate subset of data.

def get_image_class_list(request):
    response = {}
    page = request.GET.get("page")
    limit = request.GET.get("limit")
    
    print(page, limit)
    
    queryset = imgCagery.objects.all().order_by("-imgOrder")
    
    if queryset:
        serialized_data = json.loads(serializers.serialize("json", queryset))
        
        current_page = int(page)
        page_size = int(limit)
        
        start_index = (current_page - 1) * page_size
        end_index = start_index + page_size
        
        if current_page == 1:
            response["list"] = serialized_data[:end_index]
        else:
            response["list"] = serialized_data[start_index:end_index]
    else:
        response["list"] = []
    
    response["totalCount"] = len(serialized_data)
    return JsonResponse(response)