README

请参阅 savannabits#12 以了解我（Kevin Wheeler）合并的开源贡献。

这是一个简单、简洁且流畅的 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 接收的 main Datatable 事件对象。有关更多详细信息，请参阅 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)。有关更多信息，请参阅 许可证文件。