tasdildiren/primevue-datatables

PrimeVue Datatables的简单、整洁且流畅的服务端实现

v1.0.0 2023-07-10 12:27 UTC

This package is auto-updated.

Last update: 2024-09-10 15:13:34 UTC


README

Latest Version on Packagist Total Downloads

这是一个PrimeVue DatatablesLaravel中的简单、整洁和流畅的服务端实现。

image

特性

  • 全局搜索,包括在深度为3的关系中进行搜索,例如 author.user.name
  • 默认每列过滤
  • 带有方向切换的列排序
  • 带有动态每页或每页记录数设置的分页
  • 与PrimeVue Datatable完全兼容

安装

您可以通过composer安装此包

composer require tasdildiren/primevue-datatables

使用方法

服务端

这就像在您的控制器index()函数中拥有以下内容一样简单

public function index(Request $request): JsonResponse
{
    $list = PrimevueDatatables::of(Book::query())->make();
    return response()->json($list);
}

必需查询参数

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

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

客户端

有关前端实现的详细信息,请参阅PrimeVue的Lazy Datatable文档。

以下是一个loadLazyData()实现的示例

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

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

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

更新日志

请参阅CHANGELOG以获取有关最近更改的更多信息。

贡献

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

安全

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

致谢

许可协议

MIT许可协议(MIT)。有关更多信息,请参阅许可文件