Django分頁(yè)查詢（整合vue）

一、django部分

在view.py里添加分頁(yè)查詢方法

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# 分頁(yè)查詢 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)

接受前端傳來(lái)的值：page為要顯示的頁(yè)數(shù)，pageSize為每頁(yè)顯示的數(shù)量

返回值類型：

{ "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>數(shù)據(jù)增刪改查</h1><el-row type="flex"><el-col :span="12"><el-input v-model="input" placeholder="請(qǐng)輸入書名"></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代碼：

數(shù)據(jù)data部分

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

獲取數(shù)據(jù)的方法：

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 => {//在返回的數(shù)據(jù)里增加一條數(shù)據(jù)this.$set(v, 'edit', false)return v})}) }

當(dāng)每頁(yè)顯數(shù)量改變時(shí)執(zhí)行的方法

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

當(dāng)點(diǎn)第幾頁(yè)時(shí)執(zhí)行的方法

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

總結(jié)

以上是生活随笔為你收集整理的django分页查询的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。