通过 Ajax Laravel DataTable 返回 html 内容（使用 yajrabox 包）

Posted 2023-02-22

【中文标题】通过 Ajax Laravel DataTable 返回 html 内容（使用 yajrabox 包）

【英文标题】：Return html content via Ajax Laravel DataTable (using yajrabox package)

【发布时间】：2017-06-21 06:52:35

【问题描述】：

我正在使用这个包https://datatables.yajrabox.com/starter 在我的 laravel 应用程序中实现 ajax 数据表。

在我的控制器类中，我有以下方法来返回数据表的数据，如下所示：

function ajaxList()

    // Load users with users
    $users = User::with('group', 'organisation');

    // Finished
    return Datatables::eloquent($users)
        ->editColumn('is_admin', function(User $user) 
            return '<i class="fa fa-'. ($user->is_admin ? 'check' : 'times') .'" aria-hidden="true"></i>';
        )
        ->make(true);

在视图上，我渲染表格并像这样发起 ajax 请求：

<table id="users-table" class="table table-hover table-bordered" cellspacing="0" >
    <thead>
        <tr>
            <th>User ID</th>
            <th>Is Admin?</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Created At</th>
            <th>Updated At</th>
            <th>Action</th>
        </tr>
    </thead>
</table>
<script>
    $('#users-table').DataTable(
        processing: true,
        serverSide: true,
        ajax: '/users/ajaxList',
        columns: [
            data: 'id', searchable: false ,
            data: 'is_admin', searchable: false ,
            data: 'first_name',
            data: 'last_name',
            data: 'created_at', searchable: false ,
            data: 'updated_at', searchable: false ,
            data: 'action', searchable: false, orderable: false 
        ]
    );
</script>

渲染时，“is_admin”列似乎显示原始 html，而不是像这样渲染字体真棒图标：

任何想法如何解决这个问题？我也尝试像这样返回列数据：

return '!! <i class="fa fa-'. ($user->is_admin ? 'check' : 'times') .'" aria-hidden="true"></i> !!';

这也没有帮助。

【问题讨论】：

我曾经做过一个项目，其中大部分代码都是相同的（使用链接代替）。不要问我为什么，但我使用of 而不是eloquent。我不知道为什么，但它有效：return Datatables::of($articles) ->editColumn('name', function($article) return '<a href="/article/'.$article->id.'/show">'.$article->name.'</a>'; ) ->make(true);

我会将它添加为答案，以便更容易看到

【参考方案1】：

只要把你的专栏放在吹法中

escapeColumns()

例子

return $dataTable->addIndexColumn()
            ->editColumn('active', function(SettingDropdownValue $model) 
                if($model->active === true)
                return '<span class="text-center"><img src="'.\URL::asset('/images/active.png').'" border="0"  /></span>';
                 else 
                return '<img src="'.\URL::asset('/images/inactive.png').'" border="0"  />';
                
            )
            ->escapeColumns('active')
            ->addColumn('action', 'setting_dropdown_values.datatables_actions');

【参考方案2】：

添加另一个标记为rawcolumn 的列，其中包含您为各个按钮指定的名称，如下所示以解决问题：

Route::get('user-data', function() 
    $model = App\User::query();

    return DataTables::eloquent($model)
                ->addColumn('link', '<a href="#">Html Column</a>')
                ->addColumn('action', 'path.to.view')
                ->rawColumns(['link', 'action'])
                ->toJson();
);

这个rawColumns(['link', 'action']) 有什么神奇之处。您的最后一条语句可能以 ->make(true) 结尾，rawColumn 是有魔力的。

【参考方案3】：

我现在正在做一个项目，遇到同样的问题，并使用->escapeColumns([])修复它

$users = DB::table('users')->select('*');
    return datatables()->of($users)
        ->removeColumn('password')
        ->editColumn('created_at', function ($user) 
            return date('d-m-Y', strtotime($user->created_at));
        )
        ->editColumn('role_id', function ($user) 
            return Role::findOrFail( $user->role_id)->name;
        )
        ->editColumn('is_active', function ($user) 
            return ($user->is_active == 1) ? 'active' : 'suspended';
        )
        ->addColumn('actions', function ($user) 
            return '<a href="#edit-'.$user->id.'" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i> Edit</a>';
        )
        ->escapeColumns([])
        ->make(true);

来源：yajra/laravel-datatables

【参考方案4】：

好的，问题似乎是库的新 7.x 版本中未记录的重大更改：https://github.com/yajra/laravel-datatables/issues/949

在我的情况下，我已经这样修复它：

function ajaxList()

    // Load users with users
    $users = User::with('group', 'organisation');

    // Finished
    return Datatables::eloquent($users)
        ->editColumn('is_admin', function(User $user) 
            return '<i class="fa fa-'. ($user->is_admin ? 'check' : 'times') .'" aria-hidden="true"></i>';
        )
        ->rawColumns(['is_admin'])
        ->make(true);

【讨论】：

对于那些仍在使用 yajra/laravel-datatables 的人，你应该结帐 - github.com/freshbitsweb/laratables (demo: laratables.freshbits.in)。这是我现在使用的，它有一个更好的api，更容易使用。

【参考方案5】：

我曾经用几乎完全相同的代码做了一个项目（改用链接）。不要问我为什么，但我使用Datatables::of 而不是Datatables::eloquent。然而我不知道为什么，但它确实有效：

$articles = ArticlesList::all();

return Datatables::of($articles)
                    ->editColumn('name', function($article) 
                        return '<a href="/article/'.$article->id.'/show">'.$article->name.'</a>';
                    )
                    ->make(true);

【讨论】：

你知道这是否适用于急切加载吗？我主要使用Datatables::eloquent 来利用 laravel 的急切加载功能。

好的..所以这可能是不同的。

关系正在快速加载，但仍呈现为纯文本。