Datatables js: custom css

Question

我正在使用Datatables.js与Laravel。我用ajax发布了一个请求，我想在表中显示返回的响应。有办法定制这个表吗?我们可以通过给标签一个id或类名来定制它们吗?我试过了，但没有得到任何结果。

例如: 我想让第一列的文本颜色为绿色，或者我想在第二列的文本旁边添加一张照片。

$(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>

Answer 1

你可以简单地使用css来改变文本的颜色。

要添加图像，可以添加自定义渲染函数，如下所示:

$(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>

Answer 2

请参阅datatable文档:datatable示例，对于建议，我会使用Bootstrap 5来获得一些体面的外观。

同样，这些是CSS选择器:

For Table Header

table>thead>tr>th{
your styling
}

分页的

.dataTables_paginate{
styles
}

For分页链接

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

同样，如果您使用Bootstrap，您可能需要在line :3936处修改bootstrap.min.css

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