Shopware 6 Symfony ServerApp：Vue集成DataTables分页实现问询

1. 后端Symfony接口调整（支持limit和page参数） #

先确保/api/search/order接口能接收分页参数并返回包含总条数的分页数据，示例控制器代码如下：

// src/Controller/Api/OrderSearchController.php
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Doctrine\ORM\EntityManagerInterface;

public function searchOrders(Request $request, EntityManagerInterface $em): JsonResponse
{
    $limit = $request->query->getInt('limit', 10); // 默认每页10条
    $page = $request->query->getInt('page', 1);
    $offset = ($page - 1) * $limit;

    // 构建关联查询
    $qb = $em->createQueryBuilder()
        ->select('o', 'd', 'dt')
        ->from('App\Entity\Order', 'o')
        ->leftJoin('o.documents', 'd')
        ->leftJoin('d.documentType', 'dt')
        ->setMaxResults($limit)
        ->setFirstResult($offset);

    $orders = $qb->getQuery()->getResult();

    // 获取总订单数
    $totalQb = $em->createQueryBuilder()
        ->select('COUNT(o.id)')
        ->from('App\Entity\Order', 'o');
    $total = $totalQb->getQuery()->getSingleScalarResult();

    return new JsonResponse([
        'data' => $orders,
        'total' => $total,
        'page' => $page,
        'limit' => $limit
    ]);
}

2. Vue组件集成DataTables实现分页请求 #

在Vue组件中初始化DataTables，配置服务器端分页逻辑，通过Axios调用接口：

模板部分 #

<template>
  <div>
    <table id="orderTable" class="display" style="width:100%"></table>
  </div>
</template>

脚本部分 #

<script>
import axios from 'axios'
import $ from 'jquery'
import 'datatables.net'
import 'datatables.net-bs4' // 若使用Bootstrap样式可引入

export default {
  mounted() {
    this.initOrderTable()
  },
  methods: {
    initOrderTable() {
      $('#orderTable').DataTable({
        serverSide: true, // 开启服务器端分页
        processing: true,
        pageLength: 10,
        ajax: (data, callback, settings) => {
          // 转换DataTables参数为接口需要的page和limit
          const page = Math.ceil(data.start / data.length)
          const limit = data.length

          axios.post('/api/search/order', {
            associations: {
              documents: {
                associations: {
                  documentType: {}
                }
              }
            },
            includes: {
              order: ['orderNumber', 'documents']
            }
          }, {
            params: { limit, page }
          }).then(res => {
            callback({
              draw: data.draw,
              recordsTotal: res.data.total,
              recordsFiltered: res.data.total, // 无额外过滤时与总条数一致
              data: res.data.data.map(order => [
                order.orderNumber,
                // 格式化文档类型展示
                order.documents.map(doc => doc.documentType.name).join(', ')
              ])
            })
          }).catch(err => console.error('订单数据请求失败:', err))
        },
        columns: [
          { title: '订单编号' },
          { title: '关联文档类型' }
        ]
      })
    }
  },
  beforeDestroy() {
    // 销毁实例避免内存泄漏
    const table = $('#orderTable').DataTable()
    table && table.destroy()
  }
}
</script>

3. 关键注意事项 #

• 若前后端分离，需配置Symfony的CORS规则允许前端请求
• 必须开启DataTables的serverSide: true，才会触发服务器端分页逻辑
• 后端返回的total值必须准确，DataTables依赖它计算总页数
• 如需支持搜索、排序，可在ajax回调中把DataTables的搜索值、排序参数传给后端，对应调整查询逻辑

内容的提问来源于stack exchange，提问作者DannyDan