Vue+ElementUI 实现分页功能-mysql数据

目录
  • 1.问题
  • 2.解决
    • 2.1分页组件
    • 2.2获取数据库数据的函数:getData():
    • 2.3页面加载完成,需要请求第一页的数据
  • 3.分析
  • 4.结果

1.问题

当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力。这里使用elementuiPagination 分页 组件,配合mysqllimit语句,实现分页查询mysql数据。

下图是最基本的分页样式:

当然需要引入对应的事件,来实现页面改变就查询数据库。

2.解决

2.1分页组件

<el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="total"
        :current-page="pageNum"
        @current-change="handleCurrentChange">
</el-pagination>

data:初始化总数据条数(total)为1,pageNum也就是当前页数为第一页。

2.2获取数据库数据的函数:getData():

参数为offsetlimit,向后端请求数据,待会儿解释。这里使用了qs序列化参数。可以参考我的另一篇博客:Vue + ElementUI + Viewer翻页后图片无法预览 Vue父子组件异步通信问题 里面解释了qs的功能。

    getData(offset,limit){
      this.axios.post('/php/select.php', qs.stringify({
        offset: offset,
        limit: limit,
        type: '失物招领'
      }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
        if(res.data === 0){
          this.total = 0;
          this.list = [];
          return;
        }
        this.total = res.data.total
        this.list = res.data.data
        this.loading = false
      }).catch((err) => {
        this.$message.error(err)
      })
    }

2.3页面加载完成,需要请求第一页的数据

created () {
    this.getData(0,8);
  },

页面改变触发handleCurrentChange()函数,即点击了翻页,其中val参数就是当前页数,使用新的参数,

调用getData实现查询不同页面的数据:

    handleCurrentChange(val){
      this.list = [] //清空上一页数据
      this.getData((val-1)*8,8);
    }

下面是后端数据:php + mysql

现在数据表中总共有10条数据:

前端getData请求的select.php文件

select.php:

<?php
$servername = "localhost";
$username = "用户名";
$password = "密码";
$dbname = "数据库名称";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 

$type = $_POST['type'];
//获取前端的参数 开始和结束number
if ( !isset( $_POST['offset'] ) ) {
 echo 0;
 exit();
};
$offset = ( int )$_POST['offset'];

if ( !isset( $_POST['limit'] ) ) {
 echo 0;
 exit();
};
$limit = ( int )$_POST['limit'];
//分页查询数据库
$sql = "SELECT * FROM posts where type='$type'  order by id desc LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);

$sqlGetCount = "SELECT COUNT(*) cnt FROM posts where type='$type'";
$rescnt = $conn->query($sqlGetCount);
$rescnt = $rescnt->fetch_assoc();
$arr = array();
if ($result->num_rows > 0) {
 while ( $row = $result->fetch_assoc() ) {
    array_push( $arr, $row );
}
 //echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
 echo json_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));

} else {
    echo 0;
}
mysqli_close( $conn );
?>

这里使用了mysqllimit实现一次只查询一部分数据,前端传来了参数offsetlimit

sql语句:

"SELECT * FROM posts where type='$type'  order by id desc LIMIT $limit OFFSET $offset"

3.分析

这里的 LIMIT $limit OFFSET $offset的意思就是从 $offest的值开始,查询 $limit条数据。

例如 $limit = 8, $offest = 0:表示查询数据库的前8条数据,从0开始(不包含0,mysql索引从0开始),查询8条,也就是1~8条数据。
当我点击第二页时:触发handleCurrentChange()函数:

此时参数val=2,则offest = 8, limit = 8
就会查询第9~17条数据,如果没有17条数据,也会返回查询到9条后的所有数据。例如目前我数据库就10条数据,那么返回第9条和第10条两条数据。

同时select.php中页返回了总数据条数total:

SELECT COUNT(*) cnt FROM posts where type='$type'

前端页面获取到total值后赋值给this.total(绑定了Pagination的total属性,也就是总数据条数)。Pagination根据:page-size="8"属性就会将数据自动分页。例如后端返回的total为10,则分成两页。

4.结果

注意:你的limit参数一定要和Paginationpage-size属性一致,也就时一次查询一页数据。而offset就是当前的页数。

到此这篇关于Vue+ElementUI 实现分页查询-mysql数据的文章就介绍到这了,更多相关Vue+ElementUI 实现分页查询内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中的ElementUI的使用详解

    登录+sessionStorage 效果展示 登录成功后会把用户id存入前端的sessionStorage,拦截器会根据是否存在用户id来进行拦截 也可以将用户权限存入sessionStorage,然后当访问某个页面的时候在created方法中判断是否具有权限 <template> <div class="login-wrap"> <el-form class="login-container" ref="loginFormR

  • vue+elementui实现下拉表格多选和搜索功能

    本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下 在elementui的基础上对下拉框和表格进行组合 template <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px&q

  • vue3.0安装Element ui及矢量图使用方式

    在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/installation.html 使用element ui时vue2和vue3的区别 安装命令 main.js中引入文件有所不同 使用icon时v2不需要安装,v3需安装 v2和v3在vue文件中使用icon时编写方式有所不同 icon在v2中

  • Vue Element-ui实现树形控件节点添加图标详解

    目录 1.效果图 2.树形表格绑定数据加标签 3.所有代码 其他实现 总结 1.效果图 2.树形表格绑定数据加标签 想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon children: [ { icon:'el-icon-top-right', label: ['beam名称',''], children: [ { label:['name','RS49'], }, { icon:'src/assets/images/Organization

  • vue2+elementui进行hover提示的使用

    vue2+elementui进行hover提示分为外部和内部,内部使用el-tooltip,外部使用mouseover和mouseout来让提示框显隐(两个事件要做节流处理,事件要在beforedestroy中销毁) <template> <div class="hello"> <!-- <el-tooltip placement="top"> --> <!-- <div slot="conten

  • Vue+ElementUI 实现分页功能-mysql数据

    目录 1.问题 2.解决 2.1分页组件 2.2获取数据库数据的函数:getData(): 2.3页面加载完成,需要请求第一页的数据 3.分析 4.结果 1.问题 当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力.这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句,实现分页查询mysql数据. 下图是最基本的分页样式: 当然需要引入对应的事件,来实现页面改变就查询数据库. 2.解决 2.1分页组件 <el-pagination ba

  • Vue+ElementUI 实现分页功能-mysql数据

    目录 1.问题 2.解决 2.1分页组件 2.2获取数据库数据的函数:getData(): 2.3页面加载完成,需要请求第一页的数据 3.分析 4.结果 1.问题 当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力.这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句,实现分页查询mysql数据. 下图是最基本的分页样式: 当然需要引入对应的事件,来实现页面改变就查询数据库. 2.解决 2.1分页组件 <el-pagination ba

  • vue+Element-ui实现分页效果实例代码详解

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • vue实现表格分页功能

    本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下 直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-table v-loading="listLoading" :data=" list.slice((currentPage - 1) * pageSize, currentPage * pageSize) " element-l

  • vue iview实现分页功能

    本文实例为大家分享了vue iview实现分页功能的具体代码,供大家参考,具体内容如下 子组件 <template>   <div style="margin-top: 30px;">     <Page       :total="paginations.total"       show-elevator       show-sizer       :page-size="paginations.pageSize&quo

  • vue+elementUI实现分页效果

    本文实例为大家分享了vue+elementUI实现分页效果的具体代码,供大家参考,具体内容如下 页面中渲染的数据不是所有数据,是需要展示的数据,即当前页的数据,默认第一页的数据,这里为showDate template中代码段(渲染数据) <div style="height:76vh;margin-top:1%">             <el-table :data="showData"                       style

  • vue实现todolist基本功能以及数据存储功能实例详解

    实现todolist功能,具体实现如下: 可以实现对list添加.移除以及状态转变,其中添加功能既可以通过鼠标点击按钮实现,也可以通过回车键按下实现,通过使用v-model对checked的值进行双向绑定来完成状态的改变.在本次实际操作中仍存在一个小问题就是methods中函数调用,在完成数据存储前可以通过this.$options.methods.addFun();进行调用. <div id="app"> <input type="text" v

  • vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • vue + element-ui的分页问题实现

    背景介绍 最近比较空闲,公司的后台就想着把现在的后台管理系统给改版一下,说是以前的太难看了,用着也不好用,然后给我甩过来一个ant-design-pro的链接,说是他看这个就挺不错的. 我当时心里就想着,之前的那个项目混合在你们的java项目里,跟普通的jsp页面差不多,一下就是一大堆的css和js文件,看着我都害怕(好吧,我承认其实我都不敢看),这能加载的快了就奇了怪了.ant-design最初是为react设计的,ant-design-pro自然也是用react了,不得不说人家这个界面看着确

  • vue实现简单分页功能

    本文实例为大家分享了vue实现简单的分页功能的具体代码,供大家参考,具体内容如下 <template> <div id="pages">     <div class="pages">         <div class="classInfo" v-for="(item,index) in currentPageData" :key="index">    

随机推荐