原生JS实现分页及简单搜索

最新推荐文章于 2024-07-01 11:34:43 发布

Boriska1996

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量576

点赞数 2

分类专栏： Vue2.x react 文章标签： elementui javascript vue.js reactjs

本文链接：https://blog.csdn.net/RequesToGod/article/details/112860608

版权

Vue2.x 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

本文介绍了在后端不支持分页的情况下，如何通过前端处理实现分页功能。提供了一种名为`pagingFunc`的方法，用于从所有数据中按需切分页面数据，并展示了如何结合搜索功能过滤数据。此外，还提供了`simpleArrayFilter`方法用于在前端进行数据过滤。这些方法可以有效地处理大量数据的前端分页和搜索，提高用户体验。

摘要由CSDN通过智能技术生成

后端不支持分页，前端背起分页锅

项目中有时会出现后端不支持分页和查询的情况，需要前端来处理这个需求。

直接上代码，看得更舒服。

仅需前端分页

consumersList指后台返回的所有接口原始数据（思路：一次性把所有的数据全拿到，再让前端做假数据的渲染），即需要分页处理的数据。
tableData指渲染到table组件中已完成分页的数据。

pagingFunc：

该方法可写在utils方法库中再导出更方便

//写在方法库中比较方便
const pagingFunc = (array, page, size) => {
  if (page === 0) page = 1
  return array.slice((page - 1) * size, page * size)
}

//分页函数  
//consumersList指后台返回的接口数据，即需要分页的数据
//tableData指渲染到table组件中的数据
filterTable(page) {
      if (!page) {
        this.page.pageIndex = 1;
      }
      this.page.total = this.consumersList.length;
      this.tableData = pagingFunc(this.consumersList, this.page.pageIndex, 5);
      return this.tableData;
    },

filterTable使用:

methods:{
   //挂载在分页组件中的函数
   handlePageChange(val) {
      this.page = val
      this.filterTable('page')
    },
}

即每次调用分页函数时，都调用filterTable，已达到前端的数据渲染（初始化接口数据，拿到总数据时，也要调一次filterTable）。

分页+搜索

simpleArrayFilter:

该方法可写在utils方法库中再导出更方便

// array简单的过滤  传入filterArr = ['name', 'ip']  value = a  搜索array中name或者IP字段 包含‘a’的
const simpleArrayFilter = (filterArr, value, array) => {
  if (!value) return array
  let newTableData = []
  // array不存在或为空数组时
  if (!array || !array.length) array = []
  array.forEach(v => {
    for (let i = 0; i < filterArr.length; i++) {
      let item = filterArr[i]
      let str = ''
      // 如果字段值是数据
      if (isArray(v[item])) {
        v[item] = v[item].join('')
      }
      // 解决对应的筛选项没值，不在进行筛选
      if (cloneDeep(v[item])) {
        str = v[item].toUpperCase()
      }
      if (str.indexOf(value.toUpperCase()) != -1) {
        newTableData.push(v)
        break
      }
    }
  })
  return newTableData
}

使用方式和上面类似，每次数据变化时，调用一次filterTable。

将filterTable方法挂载在input或select搜索组件上即可。

 // 数据前端过滤、分页处理
 filterTable(page) {
    let keepWorkloadList = []
    //MemberTotalList值拿到的总数据
    keepWorkloadList = this.MemberTotalList
    if (this.search.name) {
      if (!page) {
        this.page = 1
      }
      let filterArr = simpleArrayFilter(
        ['login'],
        this.search.name,
        keepWorkloadList
      )
      this.total = filterArr.length
      // 当页数据全部删除后，页面未跳转至前一页
      if (pagingFunc(filterArr, this.page, 5).length === 0 && this.page > 1) {
        this.page--
      }
      this.tableData = pagingFunc(filterArr, this.page, 5)
    } else {
      this.total = keepWorkloadList.length
      // 当页数据全部删除后，页面未跳转至前一页
      if (
        pagingFunc(keepWorkloadList, this.page, 5).length === 0 &&
        this.page > 1
      ) {
        this.page--
      }
      this.tableData = pagingFunc(keepWorkloadList, this.page, 5)
    }

    //return this.tableData
  }