Laravel 5.3 - 带数据表的条件图像

Question

我有一个简单的 table 显示用户 table，我向其中添加了一个 'active' 字段，值为 1 表示活跃，0 表示不活跃。

我有以下视图（jquery 和数据table 并拉入应用程序视图）：

@extends('layouts.app')
@section('content')

<div class="panel panel-default" style="padding-left: 2em; padding-right: 2em">
  <div class="panel-heading">Users</div>
  <div class="panel-body"> 
     <table class="datatable" id="dtable" width="90%" align="center">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created at</th>
            <th>active</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
  </div>
</div>

  <script>
    $(document).ready(function(){
      $('#dtable').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('users.serverSide') }}'
        });
    });
  </script>
@endsection

在web.php中我有以下方法获取数据：

Route::get('/users/serverSide', [
    'as'   => 'users.serverSide',
    'uses' => function () {
        $users = App\User::select(['id', 'name', 'email', 'created_at', 'active']);

        return Datatables::of($users)->make();
    }
]);

一切正常，但我想使用网站图标或 Fontawesome 将活动 table 中的 1 或 0 替换为勾号或叉号。

请问有没有人指出正确的方向？我知道我可以在 mySQL 中设置一个视图，但它们往往很慢。

Answer 1

您可以使用 columns.render 选项为各种操作生成替代内容。

例如：

$('#dtable').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route('users.serverSide') }}',
    columns: [
       { data: 'id' },
       { data: 'name' },
       { data: 'email' },
       { data: 'created_at' },
       { 
          data: 'active',
          render: function(data, type, row, meta){
             if(type === 'display'){
                if(data == 1){
                   data = '<span class="fa fa-check"></span>';
                } 
             }

             return data;
          }
       }
    ]
});

Laravel 5.3 - 带数据表的条件图像

Laravel 5.3 - Conditional Image with Datatables

image

datatables-1.10

laravel-5.3