README

这是一个简单、干净且流畅的 PrimeVue Datatables 在 Laravel 中的服务器端实现。

特性

• 全局搜索，包括深度为 3 的关系搜索，例如 author.user.name
• 列级过滤
• 可切换方向的列排序
• 具有动态 每页或每条记录数 设置的分页
• 与 PrimeVue Datatable 完全兼容

安装

您可以通过 composer 安装此包

composer require savannabits/primevue-datatables

使用方法

服务器端

您的控制器 index() 函数中只需要这样写即可

public function index(Request $request): JsonResponse
{
    $list = PrimevueDatatables::of(Book::query())->make();
    return response()->json([
        'success' => true,
        'payload' => $list,
    ]);
}

所需查询参数

服务器端实现使用您的 Laravel 请求对象中的两个参数来执行过滤、排序和分页：您必须从客户端作为查询参数传递以下参数

1. 可搜索列 (传递为 searchable_columns) - 用于指定将用于执行全局数据表搜索的列
2. Dt 参数 (传递为 dt_params) - 这是从 PrimeVue 接收的主要数据表事件对象。有关详细信息，请参阅 Lazy Datatable 文档

客户端

以下是客户端的 完整 Vue3 + Tailwindcss 组件 示例.
请参阅 PrimeVue 的 Lazy Datatable 文档以获取前端实现的详细信息。

以下是您的 loadLazyData() 实现示例

const loadLazyData = async () => {
    loading.value = true;

    try {
        const res = await axios.get('/api/books',{
            params: {
                dt_params: JSON.stringify(lazyParams.value),
                searchable_columns: JSON.stringify(['title','author.name','price']),
            },
        });

        records.value = res.data.payload.data;
        totalRecords.value = res.data.payload.total;
        loading.value = false;
    } catch (e) {
        records.value = [];
        totalRecords.value = 0;
        loading.value = false;
    }
};

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的信息。

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全

如果您发现任何安全问题，请通过电子邮件 maosa.sam@gmail.com 而不是使用问题跟踪器

致谢

• Sam Maosa
• 所有贡献者

许可证

MIT 许可证 (MIT)。请参阅 许可证文件 获取更多信息。