Estoy usando Datatables.js con Laravel. Publico una solicitud con ajax y quiero mostrar la respuesta devuelta en la tabla. ¿Hay alguna forma de personalizar esta tabla? ¿Podemos personalizar las etiquetas dándoles una identificación o un nombre de clase? Intenté esto pero no obtuve ningún resultado.
Por ejemplo: quiero que el color del texto en la primera columna sea verde o quiero agregar una foto al lado del texto en la segunda columna.
$(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>Puede cambiar el color del texto simplemente usando css.
Para agregar una imagen, puede agregar una función de representación personalizada como se muestra a continuación:
$(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>Por favor, consulte la documentación de la tabla de datos: ejemplos de la tabla de datos y, como sugerencia, optaría por Bootstrap 5 para obtener un aspecto decente.
Además, estos son selectores de CSS:
Para encabezado de tabla
table>thead>tr>th{ your styling }para paginación
.dataTables_paginate{ styles }Para enlaces de paginación
.dataTables_paginate a { padding: 6px 9px !important; background: #ddd !important; border-color: #ddd !important; } Además, si usa Bootstrap, es posible que deba modificar bootstrap.min.css en la 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; }