通过Ajax Laravel DataTable返回html内容(使用yajrabox包)

时间:2017-02-03 19:55:40

标签: ajax laravel laravel-5 datatable

我正在使用此包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" width="100%">
    <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而不是像这样渲染字体真棒图标:

enter image description here

任何想法如何解决这个问题?我也试着像这样返回列数据:

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

这也无济于事。

4 个答案:

答案 0 :(得分:11)

好的,这个问题似乎是图书馆新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);
}

答案 1 :(得分:3)

只需要专心致志

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" width="15" /></span>';
                } else {
                return '<img src="'.\URL::asset('/images/inactive.png').'" border="0" width="15" />';
                }
            })
            ->escapeColumns('active')
            ->addColumn('action', 'setting_dropdown_values.datatables_actions');

答案 2 :(得分:0)

我做了一次项目,主要是完全相同的代码(使用链接代替)。不要问我为什么,但我使用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);

答案 3 :(得分:0)

我正在研究一个项目,并且遇到相同的问题,并使用->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