How to trim a string in a yajra datatable used a raw query in laravel

Question

I have a problem on how to trim string in my datatable from a query where in used a raw query to get data from the database.

my query example is

public function data()
    {
        return DB::table('query_table')
            ->select([
                DB::raw('query_table.data1 AS data1'),
                DB::raw('query_table2.data2 AS data2'),
            ])
            ->join('query_table2','query_table2.query_table_id','=','query_table.id')
            ->where(['query_table.id' => 1])
            ->orderByDesc('query_table.data1')
            ->get();
    }

from controller for my data table

public function dataDataTable()
    {
        $data = $this->query->data(); //query of data

        return DataTables::of($data)
            ->addIndexColumn()
            ->make(true);
    } 

I am using datatables as view in laravel

@extends('layouts.main' , ['title' => trans('label.data.table')])

    @include('includes.datatable_assets')

    @push('after-styles')

        @include('includes.custom_assets')
    @endpush
    @section('content')
        <div class="card">
            <div class="card-body">
                <header class="card-header card-header-custom">
                    <h2 class="card-title" style="color: white" >{!! trans('label.table.header') !!}</h2>
                </header>
                <div class="" id="list-all">
                    <table class="display" id="templates-table">
                        <thead>
                        <tr>
                            <th>@lang('label.sn')</th>
                            <th>@lang('label.data1')</th>
                            <th>@lang('label.data2')</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    @endsection

    @push('after-scripts')

        <script  type="text/javascript">

            $('#templates-table').DataTable({
                processing: true,
                serverSide: true,

                ajax: '{!! route('query.datatable.route') !!}',
                type: 'get',
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '5%'},
                    {data: 'data1', name: 'data1', orderable: false, searchable: true, width: '65%'},
                    {data: 'data2', name: 'data2', orderable: false, searchable: true, width: '35%'},      
                ],
        </script>

    @endpush

How do I trim data1 string so as can be seen with few characters in my datatable view ?

Answer 1

You can either do it in PHP or in Javascript:

Javascript:

$('#templates-table').DataTable({
    ...,
    columnDefs: [{
        targets: 1,
        render: function (data, type, row) {
            return type === 'display' && data.length > 50 ? data.substr(0, 50) + '…' : data;
        }
    }]
});

You can read more about it here.

PHP:

use Illuminate\Support\Str;

public function dataDataTable()
{
    $data = $this->query->data(); // query of data

    return DataTables::of($data)
        ->editColumn('data1', function ($data) {
            return Str::limit($data->data1, 50);
        })
        ->addIndexColumn()
        ->make(true);
}

If you don't have to show the user the full string I would use the PHP version, so your response does not get bloated.