Блог

Я хочу показать другой цвет фона для статуса, и у меня уже есть данные, но я понятия не имею, как я могу это сделать, пожалуйста, помогите мне, спасибо.

я хочу сделать так, пожалуйста, проверьте https://ibb.co/VDrk3vD

просмотр html

  <table id="datatable" class="table table-bordered table-striped" width="100%" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th class="no-sort text-center" width="5%">S.No</th>
                   <th>Date </th>
                  <th>Member Name</th>
                  <th>End User</th>
                  <th>Status</th>

                  @if ($count > 0)
                  {{-- <th class="no-sort text-center" width="10%">Status</th> --}}
                  @endif
                </tr>
              </thead>
            </table>
  

скрипт jquery

 var table = $('#datatable').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{{ route("connection.datatable") }}',
      "columns": [
        { "data": "id", "defaultContent": "" },  
        { "data": "created_at", "defaultContent": "" },
        { "data": "member_data.first_name", "defaultContent": "" },
        { "data": "user_data.first_name", "defaultContent": "" },
        { "data": "connect_status.name", "defaultContent": "" },

        @if ($count > 0)
        // { "data": "id", "defaultContent": "" },
        @endif
      ],
      "columnDefs": [{
        "targets": 'no-sort',
        "orderable": false,
      },
      {
        "targets": 0,
        "render": function (data, type, row, meta) {
          return meta.row   1;
        },
      },
      {
        "targets": 4,
        "render": function (data, type, row, meta) {

          var status = data;  

          return status
      
        },
      },
      ],
      //scrollX:true,
    });
  });
  

Вы можете использовать некоторый пользовательский CSS стиль для статуса, чтобы раскрасить background свой статус в соответствии с status текстом.

В вашей columnDefs цели 4 для status и отобразите в status соответствии с его текстом (одобрено, отклонено или ожидание) и return status в span стиле CSS внутри td

 columnDefs: [{
  targets: 4,
  render: function(status, type, row, meta) {
    if (status == 'Pending') {
      status = '<td><span class="pending status">'   status   '</span></td>'
    } else if (status == 'Approved') {
      status = '<td><span class="approved status">'   status   '</span></td>'
    } else if (status == 'Reject') {
      status = '<td><span class="rejected status">'   status   '</span></td>'
    }
    return status;
  }
}]
  

Рабочая демонстрация: (запустите фрагмент ниже)

 $(document).ready(function() {

  //ajax data
  var data = [
    ["1", "12/09/2010", "Always", "Helping", 'Pending'],
    ["2", "21/09/2010", "Zubair", "Mukhtar", "Approved"],
    ["3", "08/09/2010", "Stack", "Overflow", "Pending"],
    ["4", "15/09/2010", "Corona", "Virus", "Reject"],
    ["5", "08/09/2010", "Foo", "Bar", "Approved"]
  ];

  //datatable
  var table = $('#datatable').DataTable({
    data: data,

    //you ajax request here

    //check status on columnDefs
    columnDefs: [{
      targets: 4,
      render: function(status, type, row, meta) {
        if (status == 'Pending') {
          status = '<td><span class="pending status">'   status   '</span></td>'
        } else if (status == 'Approved') {
          status = '<td><span class="approved status">'   status   '</span></td>'
        } else if (status == 'Reject') {
          status = '<td><span class="rejected status">'   status   '</span></td>'
        }
        return status;
      }
    }]
  });
});  

 .status {
  margin: 0 auto;
  padding: 5px;
  font-size: 14px;
  border-radius: 3px;
  text-transform: capitalize;
  width: 90px;
  display: block;
  text-align: center;
  color: #fff;
}

.pending {
  background-color: #ffad04;
  border-color: transparent;
}

.approved {
  background-color: #23d160;
  border-color: transparent;
}

.rejected {
  background-color: #dc3545;
  border-color: transparent;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<table id="datatable" class="table table-bordered table-striped" width="100%" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Date </th>
      <th>Member Name</th>
      <th>End User</th>
      <th>Status</th>
    </tr>
  </thead>
</table>