学习vue3——分页（前、后端分页两种）
一、前端分页
后端将所有数据给前端，前端来实现分页
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)
