介绍

后端的同学把数据全部返回给了前端，产品要求数据支持分页和条件过滤。然后，前阵子有个前端的同事，因为这个功能而头疼了几天，所以我这里把实现的思路做下整理。

查询条件

假设我们已经拿到后端的所有数据allData。对这些数据，需要做到两点：

过滤
分页

过滤

页面上查询的条件有很多，值为空的条件，不需要作为过滤的条件，所以需要过滤空的查询条件，如下：

// refData.searchForm查询对象集合，一般不会嵌套，如果嵌套则需要递归处理
const filterQuery = () => {
  let query = [];

  Object.keys(refData.searchForm).forEach(key => {
    if (refData.searchForm[key]) {
      query.push({
        key: key,
        value: refData.searchForm[key]
      });
    }
  });

  return query;
};

通过上述代码，获取到了过滤的条件，然后再对所有数据进行过滤，如下：

// 通过下述代码，则实现的条件过滤
const queryFilterData = (query) => {
  // 有过滤，则根据条件过滤
  if (query && query.length > 0) {
    let filterData = refData.allData.filter(item => {
      return query.every(innerItem => {
        return innerItem.value.length > 0 &&
          item[innerItem.key].indexOf(innerItem.value) === -1
          ? false
          : true;
      });
    });

    return filterData;
  } else {
    // 无过滤，返回所有
    const data = cloneDeep(refData.allData);
    return data;
  }
};

到这里，拿到了数据源，且是过滤后的数据源。那么可以进行分页了。

分页

根据前端的页数和条目数，进行分页，如下：

// 通过下述代码，则实现的条件过滤
const pagination = (page, pageSize, fiterData) => {
  var pageCount = page * pageSize;
  var pagepev = (page - 1) * pageSize;
  let data = fiterData.filter((item, index) => {
    // console.log(item,index);
    return index < pageCount && index >= pagepev;
  });
  return data;
};

查询数据

// 搜索
const filterData = () => {
  let query = filterQuery();
  const allData = queryFilterData(query);
  const tableData = pagination(
    refData.mainPagination.currentPage,
    refData.mainPagination.pageSize,
    allData
  );
  refData.mainTotal = allData.length;
  refData.refTableData = tableData;
};

前端实现数据的分页和过滤

介绍

查询条件

过滤

分页

查询数据