微信小程序实现表格前后台分页

下面是微信小程序实现表格前后台分页的完整攻略：

1. 准备工作

安装微信开发者工具
新建小程序项目
安装 wx-server-sdk（用于云函数开发）

2. 前端页面设计

使用 table 标签展示表格
使用 navigator 标签实现分页

先给出一个示例代码：

<view>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr wx:for="{{items}}">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>

  <navigator wx:if="{{currentPage > 1}}"
    url="?page={{currentPage - 1}}">上一页</navigator>
  <navigator wx:if="{{currentPage * pageSize < total}}"
    url="?page={{currentPage + 1}}">下一页</navigator>
</view>

其中，items 是从后台获取的数据，currentPage 表示当前页码，pageSize 表示每页显示的条数，total 表示数据总数。

3. 后端开发

新建云函数
配置云开发环境
开发云函数逻辑

以获取留言列表为例，给出一个示例代码：

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const db = cloud.database()
  const collection = db.collection('messages')
  const {page, pageSize} = event

  try {
    const totalResult = await collection.count()
    const total = totalResult.total
    const maxPage = Math.ceil(total / pageSize)

    if (page > maxPage) {
      page = maxPage
    }

    const res = await collection.skip((page - 1) * pageSize)
                                 .limit(pageSize)
                                 .get()

    return {
      total: total,
      currentPage: page,
      pageSize: pageSize,
      items: res.data
    }
  } catch (err) {
    console.log(err)
  }
}

该函数从数据库中查询留言数据，并进行分页处理，最后将处理后的数据返回给前端。

4. 小程序调用云函数获取数据

调用 wx.cloud.callFunction 方法
将获取到的数据绑定到前端页面

以获取留言列表为例，给出一个示例代码：

Page({
  data: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    items: []
  },

  onLoad: function () {
    this.getData()
  },

  getData: function () {
    wx.showLoading({
      title: '加载中...',
    })

    wx.cloud.callFunction({
      name: 'getMessageList',
      data: {
        page: this.data.currentPage,
        pageSize: this.data.pageSize
      }
    }).then(res => {
      this.setData({
        total: res.result.total,
        currentPage: res.result.currentPage,
        pageSize: res.result.pageSize,
        items: res.result.items
      })

      wx.hideLoading()
    }).catch(err => {
      console.log(err)
      wx.hideLoading()
    })
  }
})

这里只展示了 onLoad 方法和 getData 方法的代码，其他的页面逻辑和代码可以根据实际情况进行编写。

示例说明

示例一：后台开发

假设现在有一个 students 数据表，其中有 50 条数据，我们要按照每页显示 10 条数据的方式进行分页，那么我们可以使用以下云函数实现：

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const db = cloud.database()
  const collection = db.collection('students')
  const {page, pageSize} = event

  try {
    const totalResult = await collection.count()
    const total = totalResult.total
    const maxPage = Math.ceil(total / pageSize)

    if (page > maxPage) {
      page = maxPage
    }

    const res = await collection.skip((page - 1) * pageSize)
                                 .limit(pageSize)
                                 .get()

    return {
      total: total,
      currentPage: page,
      pageSize: pageSize,
      items: res.data
    }
  } catch (err) {
    console.log(err)
  }
}

该函数从 students 数据表中查询学生数据，并进行分页处理，最后将处理后的数据返回给前端。

示例二：前端页面设计

在示例一的基础上，我们可以根据实际情况进行前端页面设计，以下是一个简单的示例代码：

<view>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr wx:for="{{items}}">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>

  <navigator wx:if="{{currentPage > 1}}"
    url="?page={{currentPage - 1}}">上一页</navigator>
  <navigator wx:if="{{currentPage * pageSize < total}}"
    url="?page={{currentPage + 1}}">下一页</navigator>
</view>