前端自定义分页查询排序方法

前端分页查询

util.js

// 查询条件为input输入，需要考虑查询值类型
// 以下只支持undefined，number，和string查询。string查询为模糊查询，其他为全等查询。
// 排序目前只支持string类型排序，支持汉字排序
// 以下是分页查询方法，根据需要，可以在switch中添加其他数据类型查询或排序
// 参数param：查询条件。dataArrys：被查询数据---数组对象一般table数据报文格式
// dataArrys = [{ name: 'zhangsan', age: 20 }]

export const getTableDataPage = (param, dataArrys，isPages = true) => {
  return new Promise((resolve) => {
    const { pageNum, pageSize, condition, sortDTO } = { ...param }
    // 先查询符合条件的数据
    let isSearchForm = false
    for(let key in condition) {
      if (condition[key] !== '') {
        isSearchForm = true
      }
    }
    if (isSearchForm) {
      const searchData = []
      dataArrys.forEach(item => {
        let isEqual = true
        for(let key in condition) {
          switch(typeof condition[key]) {
            case 'string': 
              if (condition[key] && item[key].search(condition[key]) === -1) { isEqual = false }
              break
            case 'undefined':
            case 'number': 
              if (item[key] !== condition[key]) { isEqual = false }
              break
            default: break
          }
        }
        if (isEqual) {
          searchData.push(item)
        }
      })
      dataArrys = searchData
    }
    // 再做排序
    if (sortDTO.fieldName !== '') {
      const key = sortDTO.fieldName
      switch(sortDTO.orderBy) {
        case 'desc':
          if (typeof sortDTO.fieldName === 'string') {
            dataArrys.sort((a, b) => b[key].localeCompare(a[key]))
          }
          break
        case 'asc':
          if (typeof sortDTO.fieldName === 'string') {
            dataArrys.sort((a, b) => a[key].localeCompare(b[key]))
          }
          break
        default: break
      }
    }
    
    // 最后做分页，显示数据
    if (!isPages) {
      resolve({ records: data })
      return
    }
    
    const startIndex = pageNum === 1 ? pageNum-1: (pageNum-1)*10
    const endIndex = startIndex + pageSize
    let total = 0
    let data = []
    if (dataArrys) {
      total = dataArrys.length
      data = dataArrys.slice(startIndex, endIndex)
    }
    const pages = Math.ceil(total / pageSize)// 向上取整
    const response = {
      pageNum: pageNum,
      pageSize: pageSize,
      pages: pages,
      records: data, // 注意：这里是组件需要使用键名records返回数据
      total: total,
    }

    resolve(response)
  })
}

// 使用方法
import { getTableDataPage } from './util.js'

// 分页查询
getTableDataPage(param, dataArr)

// 不分页
getTableDataPage(param, dataArr)