Yajra 数据表 Laravel，无法在特定列上换行答案

【问题标题】：Yajra datatable Laravel, unable to wrap on specific columnYajra 数据表 Laravel，无法在特定列上换行
【发布时间】：2021-02-14 01:14:30
【问题描述】：

我正在开发一个现有项目，该项目使用 Yajra Laravel-datatables 进行数据表使用。

included yajra package installed via composer.json

我面临的问题是我无法正确换行，下面是当我设置的字符限制超出通常的列可以处理时出现的问题的屏幕截图。

column address not wrapped properly

消息列应占整个表格宽度的 30%，地址应占表格总宽度的 10%，并且所有列都应换行。

下面是我的 index.blade.php 文件代码：

html part

javascript part

下面是从函数控制器传递的代码：

function controller to return datatable

这个 Laravel 使用 Bootstrap、CSS 和 JS。我为解决此问题所做的方法是将“Javascript 部分”目标更改为 7。尽管由于列数量与 HTML 中的列数不同而出现错误，因此我从控制器传递了虚拟值，但我认为这不是最佳选择解决方案，请就解决此问题的正确方法提出建议。

以下是使用的代码，我无法在任何地方托管此代码，因为我正在处理的系统中使用的库/插件/扩展太多，通常人们在哪里托管这样的代码，请告知。对于 HTML、CSS、JS，请参考下面的 sn-p

所用插件的链接： 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');
}

【问题讨论】：

请将问题中的代码发布为文本（代码 sn-p），而不是图像
问题已更新，我将代码放入 sn-p，是否有任何地方可以托管此系统，以便用户更清楚地回答
这个问题已经解决了，只要去掉 columnDefs 代码就可以了

标签： css laravel bootstrap-4 datatables yajra-datatable

【解决方案1】：

由于 jQuery 数据表是根据内容计算宽度的，所以会出现这种奇怪的情况。通常，为了解决这种情况，我将文本放在 div 中并在其上应用宽度样式。所以不是直接渲染文本My long address，而是渲染

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

在数据表中。

所以你需要这样的东西

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

【讨论】：

谢谢你，我已经按照你的指示，它适用于定义宽度大小，但实际上我意识到列不能换行是由于使用 columnDefs 设置了 className nowrap，我删除了 columnDefs 用法在 jquery 和 wrap 问题的解决方案已经修复，谢谢