django实现分页_vue json

django实现分页_vue json这里提供两种分页方法一种是手写分页,不常用,但是明白一下分页的逻辑实现第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观.手写分页后端接口classGoodList(APIView):defget(self,request):#当前页page=int(request.GET.get(‘page’,1))…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

这里提供两种分页方法

一种是手写分页,不常用,但是明白一下分页的逻辑实现

第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观.



手写分页

后端接口

class GoodList(APIView):
    def get(self, request):
        # 当前页
        page = int(request.GET.get('page', 1))
        # 一页有多少条商品
        size = int(request.GET.get('size', 1))

        # 定义从哪里开始切片
        data_start = (page - 1) * size

        # 定义切到哪
        data_end = page * size

        #查询数据
        goodslist=Goods.objects.all()[data_start:data_end]

        #查询总数量
        count=Goods.objects.count()

        # 序列化操作
        goods_ser=GoodsSer(goodslist,many=True)
        # 返回响应
        return Response({ 
   
            'total':count,
            'data':goods_ser.data
        })

前端页面

<template>
......
          <!--自主分页-->
          <div>
              <!-- v-show 判断当前页数是否有需要显示上或下一页 -->
            <Button v-show="lastpage" @click="getdata(lastpage)">上一页</Button>
            <Button v-for="index in all" @click="getdata(index)">{
  
  {index}}</Button>
            <Button v-show="nextpage" @click="getdata(nextpage)">下一页</Button>
          </div>
</template>


<script>


  export default {
    data() {
      return {
        //自主分页
        total: 0,//商品总数
        curpage: 1,//当前页
        all: 0,//总页数
        lastpage: 0,//上一页
        nextpage: 0,//下一页
        size: 2,//每页显示多少
      
        //商品列表
        goodlist: '',
          
          
    mounted() {
      //调用自主分请求
      this.getdata(1);
    },
          
    methods: {
      //自主分页接口
      getdata: function (mypage) {
        this.axios.get('http://localhost:8000/goodlist/', {
          params: {
            page: mypage,
            size: this.size
          }
        })
          .then(res => {
            this.goodlist = res.data.data;
            console.log(res.data.data);

            //判断上一页
            if (mypage == 1) {
              this.lastpage = 0;
            } else {
              this.lastpage = mypage - 1
            }

            // 计算总页数   Math.ceil  向上取整
            this.all = Math.ceil(res.data.total / this.size);
            //判断下一页
            if (mypage == this.all) {
              this.nextpage = 0
            } else {
              this.nextpage = mypage + 1
            }
          });
      },
    }
  }


</script>

<style>


</style>

heyui 组件库

后端代码不用做修改.可以直接复用.heyui前端就相对来说简单了许多.

<template>
  ......
          <!--heyui分页-->
          <br>
        </div>
        <div>
            <!-- layout可以自定义控制显示那些组件和顺序.-->
          <Pagination v-model="pagination" @change="change" layout="sizes,pager,jumper" align="center">

          </Pagination>
            
</template>


<script>

  export default {
    data() {
      return {
        //分页器变量
        pagination: {
          page: 1,
          size: 3,
          total: 5
        },
        //商品列表
        goodlist: '',
    },
          
    mounted() {
      //请求商品接口返回数据
      this.axios.get('http://localhost:8000/goodlist/', {params: {page: 1, size: 3}})
        .then(res => {
          this.goodlist = res.data.data;
          console.log(res.data.data)
        });
    },
    methods: {
      //分页器事件
      change: function () {
        //二次请求
        this.axios.get('http://localhost:8000/goodlist/', {
          params: {
            page: this.pagination.page,
            size: this.pagination.size
          }
        })
          .then(res => {
            this.goodlist = res.data.data;
            console.log(res.data.data)
          });
      },
    }
  }


</script>

<style>


</style>

两种分页的效果.上边的是heyui组件,下边是手写分页器.
在这里插入图片描述
HEY UI 分页文档:https://www.heyui.top/component/data/view/page

Element 组件文档:https://element.eleme.cn/#/zh-CN/component/installation

功能多多 各自挖掘吧.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187285.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ctk框架搭建(一) ctk框架插件加载与项目结构

    ctk框架搭建(一) ctk框架插件加载与项目结构序 使用CTK框架开发有大半年了,就实际应用上来说框架还比较可靠,但网上资料很少。而刚接触时项目已经有了相当大的体量,与业务等其他逻辑混淆,现在单独把ctk框架部分抽离出来做个总结分享,避免后来的人走弯路。 该系列介绍简单的ctk框架构建的方法,具体架构可根据自身项目设计,开发环境为macOSHighSierra,QtCreator5.10.0。ctk框架插件    CTK源码可以从Gi…

  • pycharm 查看函数帮助_python中函数和方法区别

    pycharm 查看函数帮助_python中函数和方法区别按住ctrl键,将鼠标放到函数上,就会显示函数信息,点击进去可以查看函数源码。

  • 详述ViewState用法

    详述ViewState用法与刚接触ASP.NET页面的开发人员交谈时,他们通常向我提出的第一个问题就是:“那个ViewState到底是什么?”他们的语气中流露出的那种感觉,就象我来到一家异国情调的餐馆,侍者端上一道我从未见过的菜肴时的那种感觉-既疑惑不解,又充满好奇。但肯定有人认为它不错,否则就不会提供了。所以,我会先尝一尝,或许会喜欢上它,尽管它看上去的确很古怪!对于ViewState也是如此,但是如果适应了它的风格,…

  • HDU 1711 Number Sequence(算法验证)

    HDU 1711 Number Sequence(算法验证)

  • 使用Fastjson生成Json字符串少字段属性(数据丢失)「建议收藏」

    在开发中经常要使用到fastJson来转换对象为json 串,但是最近发现在一个对象转换的时候,总是丢失了一个字段的值,(数据丢失).就很纳闷。到网上找了很多方法总是不行,最后总算是在一篇博文中看到问题的关键!现在整理如下,希望可以帮助到更多的人。package per.eblink.pojo; public class Node { private String id

  • 简单实现vue数据双向绑定_vue checkbox

    简单实现vue数据双向绑定_vue checkboxvue实现的双向数据绑定操作示例

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号