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>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>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;
}