laravel框架学习之路（三）Laravel Datatables的使用

CompileYouth 发布于2019-07-01 10:00 / 3250人阅读

摘要：我们知道，做后台管理系统需要很多表格用来展示我们的数据，笔者在项目中使用过，对于快速开发来说，将是一个不错的选择。

我们知道，做后台管理系统需要很多表格用来展示我们的数据，笔者在tp项目中使用过datatables，对于快速开发来说，datatables将是一个不错的选择。
首先来看一下最终的效果：

准备工作：
1、首先，确保你的laravel配置正确（站点能够正常访问、数据库连接正常...）
2、下载Datatables资源文件（AdminLTE中包含了Datatables资源文件，读者使用其他模板需另行引入的请自行百度），并在页面中引入，确保资源文件能够正确加载。
3、文档：Laravel Datatables开发文档

系统要求：
Laravel 5.5+
jQuery DataTables v1.10.x

ok，开始动手！（以administrator页面为例）
1、安装composer包

composer require yajra/laravel-datatables-oracle:^8.0

如果你需要使用datatables的全部插件可使用以下命令安装

composer require yajra/laravel-datatables:^1.0

2、配置Datatables（此步骤可省，但还是配置下，确保后续不会出错）
安装完成之后，打开config/app.php，键入如下代码

"providers" => [
    // ...
    YajraDataTablesDataTablesServiceProvider::class,
],

使用命令发布配置和资源文件

php artisan vendor:publish --tag=datatables

3、创建administrator模型

php artisan make:model Models/Administrator -m

编辑数据库迁移文件

engine = "InnoDB";
            $table->increments("id");
            $table->string("login_name")->unique();
            $table->string("display_name");
            $table->string("password");
            $table->string("avatar")->nullable();
            $table->rememberToken();
            $table->tinyInteger("status")->default(1);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists("administrators");
    }
}

4、创建AdministratorDatatable

php artisan datatables:make Administrator

此命令会生成DataTables/AdministratorDatatable.php，打开并编辑：

setRowClass("text-center")
            ->editColumn("avatar", function (Administrator $administrator) {
                return "avatar."">";
            })
            ->editColumn("roles", function (Administrator $administrator) {
                return $administrator->roles->map(function ($role) {
                    return "".$role->identifier."[".$role->name."]"."";
                })->implode("");
            })
            ->editColumn("status", function (Administrator $administrator) {
                if ($administrator->status == 1) {
                    return "正常";
                }
                return "禁用";
            })
            ->rawColumns(["avatar", "status", "roles", "action"])
            ->addColumn("action", function (Administrator $administrator) {
                $edit_path = admin_base_path("auth/administrators/".$administrator->id."/edit");
                $delete_path = admin_base_path("auth/administrators/".$administrator->id);
                return "".
                        " 编辑".
                    "".
                    " 删除";
            });
    }

    /**
     * Get query source of dataTable.
     *
     * @param AppModelsAdministrator $model
     * @return IlluminateDatabaseEloquentBuilder
     */
    public function query(Administrator $model)
    {
        return $model->newQuery()->select("id", "login_name", "display_name",
            "avatar", "status", "created_at", "updated_at");
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return YajraDataTablesHtmlBuilder
     */
    public function html()
    {
        return $this->builder()
            ->addTableClass("table-bordered table-striped")
            ->columns($this->getColumns())
            ->minifiedAjax("administrators")
            ->addAction(["title" => "操作", "class" => "text-center"])
            ->parameters([
                "dom" => "Bfrtip",
                "buttons" => [
                    ["extend" => "create", "text" => " 创建"],
                    ["extend" => "excel", "text" => " 导出"],
                    ["extend" => "print", "text" => " 打印"],
                    ["extend" => "reload", "text" => " 刷新"],
                ],
            ]);
    }

    /**
     * 获取数据列
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            ["name" => "id", "data" => "id", "title" => "ID", "class" => "text-center"],
            ["name" => "login_name", "data" => "login_name", "title" => "登录名", "class" => "text-center", "orderable" => false],
            ["name" => "display_name", "data" => "display_name", "title" => "显示名", "class" => "text-center", "orderable" => false],
            ["name" => "avatar", "data" => "avatar", "title" => "头像", "class" => "text-center", "orderable" => false],
            ["name" => "status", "data" => "status", "title" => "状态", "class" => "text-center"],
            ["name" => "roles", "data" => "roles", "title" => "角色", "class" => "text-center", "orderable" => false],
            ["name" => "created_at", "data" => "created_at", "title" => "创建时间", "class" => "text-center"],
            ["name" => "updated_at", "data" => "updated_at", "title" => "更新时间", "class" => "text-center"],
        ];
    }

    /**
     * 设置导出文件名
     *
     * @return string
     */
    protected function filename()
    {
        return "Administrator_" . date("YmdHis");
    }

    /**
     * 打印列
     * @var array
     */
    protected $printColumns = ["id", "login_name", "display_name", "created_at", "updated_at"];
}

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

laravel框架学习之路（三）Laravel Datatables的使用

管理员列表

管理员创建

管理员编辑

相关文章