一、前端分页

 后端将所有数据给前端，前端来实现分页

 1 <template>
 2     <div class="flex items-center justify-center mt-5">
 3             <el-pagination 
 4             background 
 5             v-model:current-page="currentPage1"
 6             v-model:page-size="pageSize1"
 7             :page-sizes="[2, 3, 4, 5]"
 8             :disabled="disabled"
 9             :background="background"
10             layout="total, sizes, prev, pager, next, jumper"
11             :total="total1"
12             @size-change="handleSizeChange"
13             @current-change="handleCurrentChange"
14             />
15         </div>
16 </template>
17 <script setup>
18 import { ref,reactive,computed } from 'vue'
19 const tableData = ref([]) // 总条数,即所有数据
20 function getData(){
21   tableData.value = [
22     {id:1,title:"title01",content:"content01","addTime":"2024-01-03"},
23     {id:2,title:"title02",content:"content02","addTime":"2024-01-03"},
24     {id:3,title:"title03",content:"content03","addTime":"2024-01-03"},
25     {id:4,title:"title04",content:"content04","addTime":"2024-01-03"},
26     {id:5,title:"title05",content:"content05","addTime":"2024-01-03"},
27     {id:6,title:"title06",content:"content01","addTime":"2024-01-03"},
28     {id:7,title:"title07",content:"content02","addTime":"2024-01-03"},
29     {id:8,title:"title08",content:"content03","addTime":"2024-01-03"},
30     {id:9,title:"title09",content:"content04","addTime":"2024-01-03"},
31     {id:10,title:"title10",content:"content05","addTime":"2024-01-03"},
32     {id:11,title:"title11",content:"content01","addTime":"2024-01-03"},
33     {id:12,title:"title12",content:"content02","addTime":"2024-01-03"},
34     {id:13,title:"title13",content:"content03","addTime":"2024-01-03"},
35     {id:14,title:"title14",content:"content04","addTime":"2024-01-03"},
36     {id:15,title:"title15",content:"content05","addTime":"2024-01-03"},
37 
38   ]
39   total1.value=tableData.value.length
40 }
41 
42 
43 /////// 前端分页 //////
44 
45 const currentPage1 = ref(1) // 当前页码
46 const pageSize1 = ref(2)  // 选择每页几条
47 const total1 = ref(0)
48 const background = ref(false)
49 const disabled = ref(false)
50 const pageData = ref([])
51 
52 // 分页逻辑
53 function getPageDatas() {
54   pageData.value = []
55   console.log(pageSize1.value)
56   for (let i =  (currentPage1.value - 1) * pageSize1.value; i < tableData.value.length; i++) {
57     // console.log(tableData.value[i])
58     pageData.value.push(tableData.value[i])
59     if (pageData.value.length === pageSize1.value) break;
60   }
61   console.log(pageData.value)
62 }
63 
64 
65 const handleSizeChange = (val) => {
66   console.log(`${val} items per page`)
67   pageSize1.value = val;
68   currentPage1.value = 1; // 选择每页几条时，自动打到第一页重新计算数据
69   getPageDatas() 
70 }
71 const handleCurrentChange = (val) => {
72   console.log(`current page: ${val}`)
73   currentPage1.value = val;
74   getPageDatas()
75 }
76 
77 getData() // 加载全部数据
78 getPageDatas() // 根据分页逻辑，添加分页的数据，页面上真实展示的数据
79 </script>

二、后端分页

 前端将分页信息传给后端，后端来返回数据

 1 def getImageClassList(request):
 2     response = {}
 3     page = request.GET.get("page")
 4     limit = request.GET.get("limit")
 5     print(page,limit)
 6     ls2 = imgCagery.objects.all().order_by("-imgOrder")
 7     if ls2:
 8         ls2 = json.loads(serializers.serialize("json", ls2))
 9         # {'model': 'book.imgcagery', 'pk': 1, 'fields': {'name': '生鲜', 'imgOrder': '1'}},
10         print(ls2)
11         # ls2 = [{"id":1,"name":"家电"},{"id":2,"name":"服饰"},{"id":3,"name":"生鲜"},{"id":4,"name":"饮品"},{"id":5,"name":"母婴"}]
12         page = int(page)   # 当前页
13         limit = int(limit) # 每页几条
14         index = page*limit
15         # 分页
16         if page == 1:
17             response["list"] = ls2[:index]
18         else:
19             response["list"] = ls2[index - limit:index]
20     else:
21 
22         response["list"] = []
23 
24     response["totalCount"] = len(ls2)
25     return JsonResponse(response)