Yajra数据表laravel，无法包装在特定列上

编程问答 2022-06-05

问题描述

嗨，我正在研究一个现有项目，该项目使用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使用boostrap css和js，我为修复此解决方案所做的方法是将“ javascript part”目标更改为7。尽管由于与html中的列数不同而出现错误，所以我从控制器，但我不认为这是最佳解决方案，请提供有关解决此问题的正确方法的建议。

下面是所使用的代码，我无法在任何地方托管此代码，因为我正在使用的该系统中使用的库/插件/扩展太多，通常有人在此托管此类代码。 对于HTML，CSS，JS，请参考以下代码段

所用插件的链接 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: "-",row) {
        return $("<div/>").html(data).text();
      }
    },{
      data: "name",name: "name",{
      data: "contact",name: "contact",{
      data: "country_name",name: "country_name",{
      data: "comment",name: "comment",{
      data: "location",name: "location",],"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','<=',$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');
}

解决方法

由于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>'; 
     } 
},
bootstrap-4datatableslaravelyajra-datatable

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...