Laravel Inertia+Vue3中DataTables空单元格及数据不更新问题

核心原因 #

1. 单元格为空+警告Requested unknown parameter '0' for row 0, column 0：DataTables默认按数组索引解析列数据，但你从Laravel传递的是对象格式数据（Eloquent模型转换的关联数组/对象），两者不匹配导致无法读取值。
2. 增删后表格不自动更新：DataTables实例未监听Inertia Props的变化，不会主动重新加载数据。

具体解决步骤 #

1. 显式配置列与数据对象的映射 #

必须给DataTables的列配置指定data属性，对应数据对象的键名，禁止依赖自动推断列。示例代码：

<DataTable ref="dtInstance" :columns="tableColumns" :data="[]">
</DataTable>

<script setup>
import { ref, defineProps } from 'vue'
import DataTable from 'datatables.net-vue3'
import 'datatables.net'

// 接收Inertia传递的Props数据
const props = defineProps({
  tableData: {
    type: Array,
    required: true
  }
})

// 列配置：data字段必须和tableData中对象的键完全匹配
const tableColumns = ref([
  { data: 'id', title: 'ID' },
  { data: 'name', title: '用户名' },
  { data: 'email', title: '邮箱' },
  // 其他列按实际数据字段配置
])
</script>

2. 监听Props变化，手动更新DataTables实例 #

通过Vue的watch监听tableData的变化，调用DataTables API刷新数据，避免切换组件才能更新的问题：

<script setup>
// 承接上面的代码...
const dtInstance = ref(null)

// 监听数据变化，更新表格
watch(props.tableData, (newData) => {
  if (dtInstance.value?.dt) {
    // 清空现有数据 → 添加新数据 → 重新绘制
    dtInstance.value.dt.clear()
    dtInstance.value.dt.rows.add(newData)
    dtInstance.value.dt.draw()
  }
}, { deep: true, immediate: true })
</script>

• immediate: true确保组件初始化时就加载数据
• deep: true监听数组内部对象的变化

3. 规范Laravel控制器的数据返回格式 #

确保传递给Inertia的是纯对象数组，避免带额外元数据的集合：

// 普通列表数据
public function index()
{
    $users = User::select('id', 'name', 'email')->get()->toArray();
    return Inertia::render('Users/Index', [
        'tableData' => $users,
    ]);
}

// 分页数据（只传递items部分）
public function index()
{
    $users = User::select('id', 'name', 'email')->paginate(10);
    return Inertia::render('Users/Index', [
        'tableData' => $users->items(),
    ]);
}

4. 禁止手动遍历与DataTables混用 #

不要同时用v-for手动渲染表格行，完全依赖DataTables的columns和API来渲染、更新表格，避免解析逻辑冲突。

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