Django分頁查詢（整合vue）

一、django部分

在view.py里添加分頁查詢方法

from django.http import JsonResponse from django.views.decorators.http import require_http_methods from django.core import serializers from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger import json# 分頁查詢 def show_page(request):page = request.GET.get('page')pageSize = int(request.GET.get('pageSize'))response = {}book_list = Book.objects.all()paginator = Paginator(book_list, pageSize)response['total'] = paginator.counttry:books = paginator.page(page)except PageNotAnInteger:books = paginator.page(1)except EmptyPage:books = paginator.page(paginator.num_pages)response['list'] = json.loads(serializers.serialize("json", books))return JsonResponse(response)

接受前端傳來的值：page為要顯示的頁數，pageSize為每頁顯示的數量

返回值類型：

{ "total": 14, "list": [ { "pk": 45, "model": "myapp.book", "fields": { "book_name": "122323123231", "add_time": "2017-09-25T07:15:57.946Z" } }, { "pk": 46, "model": "myapp.book", "fields": { "book_name": "12232312323112", "add_time": "2017-09-25T07:16:00.553Z" } }, { "pk": 47, "model": "myapp.book", "fields": { "book_name": "12232312323112", "add_time": "2017-09-25T07:16:00.730Z" } }, { "pk": 48, "model": "myapp.book", "fields": { "book_name": "12232312323112", "add_time": "2017-09-25T07:16:00.904Z" } }, { "pk": 49, "model": "myapp.book", "fields": { "book_name": "12232312323112", "add_time": "2017-09-25T07:16:01.074Z" } } ] }

二、vue部分

HTML代碼：

<template><div class="table"><h1>數據增刪改查</h1><el-row type="flex"><el-col :span="12"><el-input v-model="input" placeholder="請輸入書名"></el-input></el-col><el-col :span="2"><el-button type="primary" @click="addBook()">新增</el-button></el-col></el-row><el-row type="flex"><el-col :span="12"><el-input v-model="SearchInput" placeholder="要查詢的書名"></el-input></el-col><el-col :span="2"><el-button type="primary" @click="searchBook()">查詢</el-button></el-col></el-row><el-table :data="tableData" border style="width: 100%"><el-table-column label="日期" width="280"><template scope="scope"><el-icon name="time"></el-icon><span style="margin-left: 10px">{{ scope.row.fields.add_time }}</span></template></el-table-column><el-table-column label="書名" width="280"><template scope="scope"><el-input v-show="scope.row.edit" size="small" v-model="scope.row.fields.book_name"></el-input><span v-show="!scope.row.edit">{{ scope.row.fields.book_name }}</span></template></el-table-column><el-table-column label="操作"><template scope="scope"><el-button size="small"@click="handleEdit(scope.$index, scope.row)">{{ scope.row.edit ? '完成' : '編輯'}}</el-button><el-button size="small"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5,15,20,25]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div> </template>

script代碼：

數據data部分

data() {return {input: '',SearchInput: '',//一共多少條數據total: 0,//每頁顯示多少條數據pageSize: 5,//當前第幾頁page: 1,tableData: [],currentPage: 1} },

獲取數據的方法：

showBooks() {this.$http.get(requestUrl + '/api/show_page?page=' + this.page + '&pageSize=' + this.pageSize).then((response) => {let res = JSON.parse(response.bodyText);console.log(res);this.total = res.total;this.tableData = res.list.map(v => {//在返回的數據里增加一條數據this.$set(v, 'edit', false)return v})}) }

當每頁顯數量改變時執行的方法

handleSizeChange(pageSize) {//每頁顯示多少條數據this.pageSize = pageSize;console.log(pageSize);this.showBooks() },

當點第幾頁時執行的方法

handleCurrentChange(val) {this.page = val;this.showBooks();console.log(`當前頁: ${val}`); }

總結

以上是生活随笔為你收集整理的django分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。