Datatable: addColumn sends only text

Question

I'm doing server side procesing and I'm adding columns with some css styles, but for some reason it isn't interpreted in html, it gets it only as text.

This is my php code.

    public function getCompras()
{
    $compra = Compra::with('empresas');
    return DataTables::of($compra)
        ->addColumn('empresas', function ($compra) {
            return $compra->empresas->first()->nombre;
        })
        ->addColumn('estado', function ($compra) {
            if ($compra->estado == 0) {
                return '<span class="label label-warning" >Pendiente</span>';
            } else {
                return '<span class="label label-success">Cobrado</span>';
            }
        })
        ->make(true);
}

My js

$(document).ready(function () {
  $('#tb_por_pagar').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/cuentas/pagar/data',
    columns: [
      {data: 'factura_numero', name: 'factura_numero'},
      {data: 'total_transferencia', name: 'total_transferencia'},
      {data: 'fecha_pago', name: 'fecha_pago'},
      {data: 'empresas', name: 'empresas'},
      {data: 'estado', name: 'estado'},
    ],
    'language': {
      'url': '../plugins/dataTables.spanish.lang'
    }
  })
})

and this is the result

Thx for the help!

The method that's working

Answer 1

The solutions is to add ->rawColumns() to the end of our method

public function getCompras()
{
    $compra = Compra::with('empresas');
    return DataTables::of($compra)
        ->addColumn('empresas', function ($compra) {
            return $compra->empresas->first()->nombre;
        })
        ->addColumn('estado', function ($compra) {

                return "<span class='label label-warning' >Pendiente</span>";

        })

        ->rawColumns(['estado'])
        ->make(true);
}

Answer 2

The solutiuon is add to $dt->escapeColumns([])->make( true ) to the end of line. Here is my project code:

$data = DB::table( 'products' )->get();
$dt   = DataTables::of( $data );
$dt->addColumn( 'action', function ( $data ) {
    $button = '<a class="pointer edit" data-id="' . $data->id . '" title="Edit(' . $data->id . ')"><i class="fa fa-edit"></i></a>';
    $button .= '&nbsp;';
    $button .= '<a class="pointer delete" data-id="' . $data->id . '" title="Delete(' . $data->id . ')"><i class="fa fa-trash"></i></a>';

    return $button;
} );

return $dt->escapeColumns([])->make( true );