前端分页_JS前端分页逻辑

前端分页_JS前端分页逻辑在web开发过程中,通常使用表格展示数据,在数据较多时采用分页的方式展示给用户。 分页方式有前端假分页和后端分页两种实现方式,此文仅记录前端假分页实现方式。 第一步:添加分页组件(el-pagination)在表格下方,添加的代码如下所示: <template> <el-table

在web开发过程中,通常使用表格展示数据,在数据较多时采用分页的方式展示给用户。

分页方式有前端假分页和后端分页两种实现方式,此文仅记录前端假分页实现方式。

 

第一步:添加分页组件(el-pagination)在表格下方,添加的代码如下所示:

复制代码
<template>
    <el-table>
    ...
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="currentTotal">
    </el-pagination>
</template>

<script>
    ...
</script>
复制代码

 

第二步:添加分页所需的变量,如下所示:

复制代码
<script>
  export default {
    methods: {
      ...
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>
复制代码

 

第三步:添加相应的分页方法,如下所示:

复制代码
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>
复制代码

 

第四步:修改查询按钮逻辑,在成功查询后,更新数据的总数量。代码如下所示:

复制代码
<script>
  import {ServFindAllByConditions} from '@/service/database'
  export default {
    methods: {
      handleBtnQuery(query) {
        if (query.env === "") {
          this.$message({
            message: '请选择查询环境',
            type: 'warning'
          });
          return;
        }
        
        ServFindAllByConditions(query).then(res => {
          this.tableData = res.data;
          this.currentTotal = this.tableData.length;
          this.$message({
            message: res.msg,
            type: res.code == 200 ? 'success' : 'warning'
          });
        })
        .catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>
复制代码

 

第五步:使用slice实现前端的假分页,最终vue文件中的主要代码如下所示:

复制代码
<template>
  <d2-container>
    <el-form :model="query" :inline="true">
      <el-form-item label="英文简称:">
        <el-input v-model="query.eng" placeholder="请输入英文简称..." clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleBtnQuery(query)" type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      hight="250"
      border
      stripe
      max-height="650"
      style="width: 100%">
      <el-table-column fixed type="index" width="50"></el-table-column>
      <!--<el-table-column prop="id" label="系统主键" width="100"></el-table-column>-->
      ...
      ...
      <el-table-column label="访问链接" width="400" show-overflow-tooltip>
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.url}}</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="currentTotal">
    </el-pagination>
</template>

<script>
  import {ServFindAllByConditions} from '@/service/database'
  export default {
    methods: {
      handleBtnQuery(query) {
        if (query.env === "") {
          this.$message({
            message: '请选择查询环境',
            type: 'warning'
          });
          return;
        }
        
        ServFindAllByConditions(query).then(res => {
          this.tableData = res.data;
          this.currentTotal = this.tableData.length;
          this.$message({
            message: res.msg,
            type: res.code == 200 ? 'success' : 'warning'
          });
        })
        .catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>
复制代码

今天的文章前端分页_JS前端分页逻辑分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

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

(0)
编程小号编程小号
上一篇 2023-09-05
下一篇 2023-09-05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注