Yajra datatable Laravel, unable to wrap on specific column

Question

I am working on an existing project which use Yajra Laravel-datatables for its datatable usage.

included yajra package installed via composer.json

The problem I am facing is I am unable to wrap text properly, below is the screenshot of the problem appear when I put more character limit than the usual column can handle.

column address not wrapped properly

The message column should appear at 30% of the full table width and address should use 10% of the total table width and all column should be wrapped.

Below is my index.blade.php file code:

html part

javascript part

And below is the code which are passed from function controller:

function controller to return datatable

This Laravel use Bootstrap, CSS, and JS. The method I have done to fix this is changing 'Javascript part' targets to 7. Although an error appears due to not same column amount as in HTML, so I pass dummy value from controller, but I don't think this as an optimal solution, kindly advice on proper way to fix this issue.

Below is the code that are used, I am unable to host this code anywhere because the library/plugin/extension used in this system I am working on are too many, usually where do people host code like this kindly advise. for the HTML, CSS, JS kindly refer below snippet

Link for plugin used: https://drive.google.com/drive/folders/1ctBNsaSu8dWCvYL1tAPI_IQPwgwHzqDR

var table = $('#table');

var settings = {
  "autoWidth": false,
  "processing": true,
  "serverSide": true,
  "deferRender": true,
  "ajax": "{{ fullUrl() }}",
  "columns": [{
      data: 'index',
      defaultContent: '',
      orderable: false,
      searchable: false,
      render: function(data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
      }
    },
    {
      data: "date",
      name: "date",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
    {
      data: "name",
      name: "name",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
    {
      data: "contact",
      name: "contact",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
    {
      data: "country_name",
      name: "country_name",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
    {
      data: "comment",
      name: "comment",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
    {
      data: "location",
      name: "location",
      defaultContent: "-",
      render: function(data, type, row) {
        return $("<div/>").html(data).text();
      }
    },
  ],
  "columnDefs": [{
    className: "nowrap",
    "targets": [6]
  }],
  "sDom": "<t><'row'<p i>>",
  "buttons": [],
  "destroy": true,
  "scrollCollapse": true,
  "oLanguage": {
    "sEmptyTable": "{{ __('Tiada data')}}",
    "sInfo": "{{ __('Paparan dari')}} _START_ {{ __('hingga')}} _END_ {{ __('dari')}} _TOTAL_ {{ __('rekod')}}",
    "sInfoEmpty": "{{ __('Paparan 0 hingga 0 dari 0 rekod')}}",
    "sInfoFiltered": "(Ditapis dari jumlah _MAX_ rekod)",
    "sInfoPostFix": "",
    "sInfoThousands": ",",
    "sLengthMenu": "Papar _MENU_ rekod",
    "sLoadingRecords": "Diproses...",
    "sProcessing": "Sedang diproses...",
    "sSearch": "Carian:",
    "sZeroRecords": "{{ __('Tiada padanan rekod yang dijumpai')}}.",
    "oPaginate": {
      "sFirst": "Pertama",
      "sPrevious": "Sebelum",
      "sNext": "Kemudian",
      "sLast": "Akhir"
    },
    "oAria": {
      "sSortAscending": ": diaktifkan kepada susunan lajur menaik",
      "sSortDescending": ": diaktifkan kepada susunan lajur menurun"
    }
  },
  "iDisplayLength": 20
};

table.dataTable(settings);

.dataTables_wrapper .dataTables_info {
  clear: none !important;
  font-size: 12px !important;
  padding: 0 33px !important;
  color: #575757 !important;
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
  background-color: #ebe8ec !important;
  color: #000 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

@push('css')
<link href="{{ asset('assets/plugins/jquery-datatable/media/css/dataTables.bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css') }}" rel="stylesheet" type="text/css">

<link href="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css">

<link href="{{ asset('assets/plugins/datatables-responsive/css/datatables.responsive.css') }}" rel="stylesheet" type="text/css">

@endpush

@push('js')
<script src="{{ asset('assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/media/js/dataTables.bootstrap.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js') }}" type="text/javascript"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/dataTables.buttons.min.js') }}"></script>
<!-- <script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/buttons.bootstrap.min.js') }}"></script> -->
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/buttons.colVis.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/Buttons/js/buttons.print.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/PDFMake/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/PDFMake/vfs_fonts.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-datatable/extensions/JSZip/jszip.min.js') }}"></script>

<script src="{{ asset('assets/plugins/datatables-responsive/js/datatables.responsive.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/lodash.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/datatables.js') }}" type="text/javascript"></script>
@endpush

// because the code use too much asset and i don't know which asset are required based on package datatable i use, i attach here the list

<div class=" container-fluid container-fixed-lg bg-white">
  <div class="card card-transparent">
    <div class="card-header px-0 search-on-button">
      <div class="clearfix"></div>
    </div>
    <div class="overflow">
      <table class="table table-hover" id="table">
        <thead>
          <tr>
            <th class="fit">{{ __('No.') }}</th>
            <th width="15%">{{ __('Date Log') }}</th>
            <th width="25%">{{ __('Name') }}</th>
            <th width="10%">{{ __('Contact Number') }}</th>
            <th width="10%">{{ __('Country') }}</th>
            <th width="30%">{{ __('Message') }}</th>
            <th width="10%">{{ __('Address') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

public function index(Request $request) {

    // $customer_service = CustomerService::select();
    $customer_service = CustomerService::select()->orderBy('created_at', 'desc');

    if($request->ajax()) {


        if ($request->tarikh_rekod_mula) {
            $customer_service->whereDate('created_at','>=',Carbon::createFromFormat('d/m/Y', $request->tarikh_rekod_mula)->format('Y-m-d'));
        }
        if ($request->tarikh_rekod_akhir) {
            $customer_service->whereDate('created_at','<=',Carbon::createFromFormat('d/m/Y', $request->tarikh_rekod_akhir)->format('Y-m-d'));
        }

         return datatables()->of($customer_service->get())
            ->editColumn('date', function ($customer_service) {
                return Carbon::parse($customer_service->created_at)->format('d/m/Y H:i:s') ?? '-';
            })
            ->editColumn('name', function ($customer_service) {
                return  optional($customer_service->user)->name ?? '-';
            }) 
            ->editColumn('contact', function ($customer_service) {
                return  optional($customer_service->user)->phone ?? '-';
            })
            ->editColumn('country_name', function ($customer_service) {
                return $customer_service->country_name ?? '-';
            })
            ->editColumn('comment', function ($customer_service) {
                return $customer_service->comment ?? '-';
            })
            ->editColumn('location', function ($customer_service) {
                return $customer_service->location ?? '-';
            }) 
            ->editColumn('action', function ($customer_service) {
                return null;
            })
            ->make(true);

       
    }
    else {
        $log = new LogSystem;
        $log->module_id = 38;
        $log->activity_type_id = 9;
        $log->description = "Papar senarai Khidmat Pelanggan";
        $log->url = $request->fullUrl();
        $log->method = strtoupper($request->method());
        $log->ip_address = $request->ip();
        $log->created_by_user_id = auth()->id();
        $log->save();
    }


    return view('customer_service.index');
}

Please post codes in the qustion as text (code snippet), instead as images — Tharaka Dilshan
question have been updated i put in the code snippet, is there anywhere i can host this system so it will be more clear for user to answer — farhanz95
this issue have been fixed, just remove the columnDefs code and the wrap works — farhanz95

Arun A S Arun A S · Accepted Answer · 2020-11-01T04:47:42

Since jQuery datatable calculates width based on content, weird cases like this occur. Usually, to fix such cases, I put the text inside a div and apply width style on it. So instead of directly rendering the text My long address, you render

<div style="width:10%">My long address</div>

in the datatable.

So you'd need something like this

{ 
    data: "location", 
    name: "location", 
    defaultContent: "-", 
    render: function(data, type, row)  
    { 
         return  '<div style="width:10%">' + $('<div/>').html(data).text() + '</div>'; 
     } 
},

Yajra datatable Laravel, unable to wrap on specific column

1 Answers