分页 pageHelper后端json数据解释前端 elementui、原生vue、原生HTML

最新推荐文章于 2023-05-23 22:59:08 发布

努力的Java程序员

最新推荐文章于 2023-05-23 22:59:08 发布

阅读量815

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44605543/article/details/108090412

版权

分页

后端数据

json数据没写的在下边的Java代码有解释

{
    //当前页
    "pageNum": 1,
    //每页多少条
    "pageSize": 2,
    //当前页的数量
    "size": 2,
    "startRow": 1,
    "endRow": 2,
    //数据库表中一共有10条数据
    "total": 10,
    //总页数
    "pages": 5,
    //现在的数据看：第一页（pageNum）有两条数据（pageSize）的集合
    "list": [
      {
        "mpid": "5f0b44eb9fdd4433a949c90dda64eb6f",
        "id": "1",
        "phone": "1"
        
      },
      {
        "mpid": "7d5ab12ff43643919d4d57e2b83dd921",
        "id": "1",
        "phone": "1"
      }
    ],
    //前一页 pro有之前的意思 所以前一页是0（因为是第一个所以前一页是1 有点多余好理解）
    "prePage": 0,
    //下一页 next有下一个的意思 所以下一页是2（因为是第一个所以前一页是1 有点多余好理解）
    "nextPage": 2,
    //是不是第一页 true是第一页 false不是第一页 
    "isFirstPage": true,
    //是不是最后一页 true是最后一页 false不是最后一页
    "isLastPage": false,
    //是否有上一个页面
    "hasPreviousPage": false,
    //是否有下一个页面
    "hasNextPage": true,
    //
    "navigatePages": 8,
    "navigatepageNums": [
      1,
      2,
      3,
      4,
      5
    ],
    //
    "navigateFirstPage": 1,
    //
    "navigateLastPage": 5,
    //最后也面
    "lastPage": 5,
    //第一个页面
    "firstPage": 1
  }

Java PageInfo 详解

/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2014-2017 abel533@gmail.com
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

package com.github.pagehelper;

import java.io.Serializable;
import java.util.Collection;
import java.util.List;

/**
 * 对Page<E>结果进行包装
 * <p/>
 * 新增分页的多项属性，主要参考:http://bbs.csdn.net/topics/360010907
 *
 * @author liuzh/abel533/isea533
 * @version 3.3.0
 * @since 3.2.2
 * 项目地址 : http://git.oschina.net/free/Mybatis_PageHelper
 */
@SuppressWarnings({"rawtypes", "unchecked"})
public class PageInfo<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;

    //由于startRow和endRow不常用，这里说个具体的用法
    //可以在页面中"显示startRow到endRow 共size条数据"

    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
    //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;

    //前一页
    private int prePage;
    //下一页
    private int nextPage;

    //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;
    //是否有前一页
    private boolean hasPreviousPage = false;
    //是否有下一页
    private boolean hasNextPage = false;
    //导航页码数
    private int navigatePages;
    //所有导航页号
    private int[] navigatepageNums;
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;

    public PageInfo() {
    }
}

前端

element-ui

<template>
	<!-- 分页 开始 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="memberInfo.pageNum"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="memberInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="memberInfo.total">
      </el-pagination>
    </div>
    <!-- 分页 结束 -->
</template>

export default {
    data () {
      return {
		page: {
          pageNum: 1,
          pageSize: 5,
          name: ''
        },
		memberInfo: {}
      }
    }
	methods: {
//这两个方法 调整一页多少条和第几页的 page做页数和总数的整合给后端
	  // 一页多少条
      handleSizeChange(val) {
		console.log(`每页 ${val} 条`);
        this.page.pageSize = val
        this.findByName()
      },
	  // 第几页
      handleCurrentChange(val) {
		console.log(`当前页: ${val}`);
        this.page.pageNum = val
        this.findByName()
      },
	}
}

vue（原生）

<template>
  <div>
       <template>
    <div>
        <table border="1" width="500">
            <tr>
                <td>编号</td>
                <td>用户名</td>
                <td>密码</td>
                <td>生日</td>
                <td>操作</td>
            </tr>
//遍历分页数据
            <tr v-for="(student, index) in pageStudent.list" :key="index">
                <td>{{index+1}} </td>
                <td>{{student.student_name}} </td>
                <td>{{student.student_age}} </td>
                <td>{{student.student_birthday}} </td>
                <td>
                    <router-link :to='"/updateStudent/"+student.studentID'>修改</router-link> | 
                    <a href="#" @click.prevent="deleteStudent(student.studentID)">删除</a>
                </td>
            </tr>
        </table>
//在pageStudent中数据有好多
        <a href="#" v-if="pageStudent.hasPreviousPage" @click.prevent="previewPage">上一页</a>
        <a href="#" v-if="pageStudent.hasNextPage"  @click.prevent="nextPage">下一页</a> <br>
        {{pageStudent}}
    </div>
</template>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:80"
export default {
    data() {
        return {
             //接受数据遍历
            pageStudent:{},
//传参时的第几页一页几条
            pages:{
                pageNum:1,
                pageSize:2
            }
        }
    },
    created() {
//页面加载完成时调用方法
       this.pag();
    
},
    methods: {
        previewPage(){
            this.pages.pageNum --;
            this.pag();
        },
        nextPage(){
             this.pages.pageNum ++;
            this.pag();
        },
        deleteStudent(id){
            alert(id)
        },
//发送ajax请求 传参
        pag(){
             axios.get("/student/pages",{params:this.pages})
            .then(res => {
                console.log(res.data);
//将回显的数据赋值给 pageStudent
                this.pageStudent = res.data;
            })
            .catch(err => {
                console.error(err); 
            })
        }
    },
}
</script>

HTML（原生）

//总方法
//所有效果基于find方法进行

function find(pageSize,pageNumber) {
    $.ajax({
        method:"get",
        url:"/book/findAll/"+pageSize+"/"+pageNumber,
        dataType:"json",
        success:function (data) {
            var userAll = $("#userAll");
            userAll.html("");
            $(data.list).each(function () {
                userAll.append(' <tr>\n' +
                    '                <td>'+this.bid+'</td>\n' +
                    '                <td>'+this.title+'</td>\n' +
                    '                <td>'+this.price+'</td>\n ' +
                    '                <td>'+this.category.cname+'</td>\n' +
                    '                <td><a class="btn btn-info" onclick="update('+this.bid+')" target="_blank">修改</a></td>\n' +
                    '                <td><a class="btn btn-info" onclick="DeleteUser('+this.bid+')" target="_blank">删除</a></td>\n' +
                    '            </tr>')
            });



	//数据总显示
            $("#pageInfo").html("总共有"+data.total+"条数据，共有"+data.pages+"页");

	


	//跳转页
            $("#pageNum").val(data.pageNum);
	 


	//数字页

            var pages = $("#pages");
            pages.html("");
            for (var i = 1; i <= data.pages; i++) {
                pages.append('<input type="button" value="'+(i)+'" onclick="find(1,'+i+')">')
            }
	 




	//当前页面在第一页,取消上一页按钮
            if (data.pageNum===1){
                $("#prepage").css("display","none");
            } else {
                $("#prepage").css("display","inline");
            }
	 


	//当前页面在最后一页,取消下一页按钮
            if (data.pageNum===data.pages) {
                $("#nextpage").css("display","none");
            }else {
                $("#nextpage").css("display","inline");
            }
 	 


        }
    });
}


<tr>
    <th><p align="right" id="pageArea">
        <a id="prepage" href="javascript:goPagex(-1)">上一页</a>
    </th>
    <th id="pages">
    </th>
    <th>
        <p>
            <a id="nextpage" href="javascript:goPagex(1)">下一页</a>
            <input type="text" id="pageNum" name="pageNum" value="1" size="3">
            <input type="button" value="go" onclick="searchUlistByParamForPage()">
            <br/>
        </p>
    </th>
    <span id="pageInfo">总共有？条数据，共有？页</span>
</tr>

努力的Java程序员

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分页 pageHelper后端json数据解释前端 elementui、原生vue、原生HTML

分页后端数据有几个不懂，欢迎解释{ //当前页 "pageNum": 1, //每页多少条 "pageSize": 2, //当前页的数量 "size": 2, "startRow": 1, "endRow": 2, //数据库表中一共有10条数据 "total": 10, //总页数 "pages": 5, //现在的数据看：第一页（pageNum）有两条数据（pageSize）的集合 "
复制链接

扫一扫