Datatables js: custom css

Question

I'm using Datatables.js with Laravel. I'm post a request with ajax and I want to show the returned response in the table. Is there a way to customize this table? Can we customize the tags by giving them an id or class name? I tried this but didn't get any results.

For example: I want to make the text color in the first column green or I want to add a photo next to the text in the second column.

$(function() {
  $("#ordersTable").DataTable({
    processing: true,
    serverSide: false,
    ajax: "{{route('index22')}}",
    
    data : [{"orderId":"1","orderNumber":"ABC123", "orderDate" : "12/Jun/2022"}],
    columns: [{
        data: 'orderId'
      },
      {
        data: 'orderNumber'
      },
      {
        data: 'orderDate'
      },
    ]
  });
});

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

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table id="ordersTable" class="table-striped table">
  <thead>
    <tr>
      <td>ORDER NUMBER</td>
      <td>STORE</td>
      <td>STATUS DATE</td>
    </tr>
  </thead>
</table>

Lee Taylor · Accepted Answer · 2022-06-11 23:23:25Z

You can change the text colour simply using css.

To add an image, you can add a custom render function as below:

$(function() {
  $("#ordersTable").DataTable({
    processing: true,
    serverSide: false,
    ajax: "{{route('index22')}}",
    
    data : [{"orderId":"1","orderNumber":"ABC123", "orderDate" : "12/Jun/2022"}, {"orderId":"2","orderNumber":"DEF987", "orderDate" : "11/Jun/2022"}],
    columns: [{
        data: 'orderId'
      },
      {
        data: 'orderNumber',
        render: function (data, type) 
        {
          if (type === 'display') 
          {
            return "<img src='https://via.placeholder.com/80x40.png?text=ORDER' />" + data;
          }
          
          return data;
         }
      },
      {
        data: 'orderDate'
      },
    ]
  });
});

#ordersTable tbody tr td:first-child
{
  color:green;
}

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

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table id="ordersTable" class="table-striped table">
  <thead>
    <tr>
      <td>ORDER ID</td>
      <td>ORDER NUMBER</td>
      <td>ORDER DATE</td>
    </tr>
  </thead>
</table>

helloworld · Accepted Answer · 2022-06-11 22:47:23Z

1

Please, refer to datatable documentation: datatable examples , and for suggestion I would go with Bootstrap 5 for some decent look.

Also, these are CSS selectors:

For Table Header

 table>thead>tr>th{
    your styling
    }

For Pagination

.dataTables_paginate{

styles
}

For Pagination Links

.dataTables_paginate a {
    padding: 6px 9px !important;
    background: #ddd !important;
    border-color: #ddd !important;
}

Also, if you using Bootstrap, you will might have to modify the bootstrap.min.css at line :3936

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    }

answered Jun 11, 2022 at 22:47

helloworld

1861 gold badge2 silver badges10 bronze badges

1 Comment

322quick1 Over a year ago

I want to apply different css for each column

Collectives™ on Stack Overflow

Datatables js: custom css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related