Django Vue Elment-ui 自定义分页
数据打印格式:
VUE部分:
<div style="height:80vw;"> <el-table :data="resultTable.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)" border ref="multipleTable" tooltip-effect="light" size="mini"> <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> <el-table-column v-for="(key,index) in Object.keys(resultTable[0])" :key="Math.random(index)" :label="key" :prop="key" align="center" show-overflow-tooltip> </el-table-column> </el-table> <br /><br /> <el-pagination :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 3, 4,5]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" > </el-pagination><br /><br /> </div>
data() { return{ user_actions_name: this.$route.query.user_actions_name, resultTable:[], queryInfo: { query: "", // 查询参数 pagenum: 1, // 当前页码 page: 10, pagesize: 20, // 每页显示条数 }, total: 10, } },
pageRequest (query) { query['user_actions_name'] = this.user_actions_name query['data_point_app_id'] = localStorage.getItem("data_point_app_id") // return GetList(query) //标准列表输出 ////////////最新============= Promise.all([ request({ url: urlPrefix, method: 'get', params: query }) ]).then((res)=>{ console.log("--------------------123466777777777---------------") console.log(res) console.log(res[0]) this.resultTable = res[0].data // this.total = int(res[0].total_count / this.queryInfo.pagesize) this.total = Math.ceil(res[0].total_count / this.queryInfo.pagesize) }); ////////////============= }, // 数据请求 // 分页 // 每页显示的条数 // 监听 page size 改变的事件 handleSizeChange(newSize) { this.queryInfo.pagesize = newSize; this.pageRequest(); }, // 监听 页码值 改变的事件 handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage; this.pageRequest(); },
Django部分:
# ====================== total_count = len(new_custom_item) page_cursor = LargeResultsSetPagination() data_list = page_cursor.paginate_queryset(new_custom_item, request, view=self) result = {'code':2000, 'data': data_list, 'total_count': total_count } print('--------返回的事件数据分页格式') print(result) # ====================== return Response(result)
from rest_framework.pagination import PageNumberPagination class LargeResultsSetPagination(PageNumberPagination): page_size = 1000 page_size_query_param = 'page_size' # 指定控制每页数量的参数 max_page_size = 10000 # 指定每页最大返回的数量