我目前正在研究一個資料表，它最終似乎完全按照我想要的方式作業，但是仍然存在一個問題，請參閱下面的螢屏截圖：
如您所見，我使用以下代碼根據實際狀態值在 STATUS 列中添加自定義顏色：
'columnDefs': [ {
'targets': 3,
'createdCell': function (td, cellData, rowData, row, col) {
if ( cellData == 'Pending' ) {
$(td).css('color', '#e27522'),
$(td).css('font-weight', 'bold')
}
else if ( cellData == 'Confirmed' ) {
$(td).css('color', 'green'),
$(td).css('font-weight', 'bold')
}
else if ( cellData == 'Accepted' ) {
$(td).css('color', 'lightgreen'),
$(td).css('font-weight', 'bold')
}}
},
{ responsivePriority: 1, targets: 5 }]
這很好用，但是這些屬性在回應模式下會被洗掉。
回應模式：
如何維護這些顏色值的狀態？這是我的完整Javascript：
<script type="text/javascript">
$(document).ready(function() {
$('#jquery-datatable-ajax-php').DataTable({
'processing': true,
'responsive': true,
'serverSide': true,
'serverMethod': 'post',
'order': [[5, 'desc']],
'ajax': {
'url':'datatable.php'
},
'columns': [
{ data: 'client_name' },
{ data: 'quote_number' },
{ data: 'project' },
{ data: 'status' },
{ data: 'quote_total', render: $.fn.dataTable.render.number(',', '.', 2,), className: 'dt-body-right'},
{ data: 'id', 'name': 'id', fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {$(nTd).html("<a class='link' href='/quotes/view/" oData.id "?nocache=<?php echo time()?>'>View</a>");}}
],
'columnDefs': [ {
'targets': 3,
'createdCell': function (td, cellData, rowData, row, col) {
if ( cellData == 'Pending' ) {
$(td).css('color', '#e27522'),
$(td).css('font-weight', 'bold')
}
else if ( cellData == 'Confirmed' ) {
$(td).css('color', 'green'),
$(td).css('font-weight', 'bold')
}
else if ( cellData == 'Accepted' ) {
$(td).css('color', 'lightgreen'),
$(td).css('font-weight', 'bold')
}}
},
{ responsivePriority: 1, targets: 5 }]
});
} );
</script>
一些專家的幫助將不勝感激，謝謝。
uj5u.com熱心網友回復：
您可以在元素內為“待定”、“已確認”和“已接受”創建狀態標簽<span>- 并向該元素添加一個類以控制其格式。
當表格在回應模式下折疊時，整個跨度將被傳輸到子記錄 - 并且格式將被保留。
首先添加一些 CSS 樣式。為簡單起見，我在我的樣式中命名了 CSS 類以匹配狀態標簽。這有助于我避免if... else...為不同的類名撰寫陳述句。但是你可以隨意呼叫你的類：
.Pending {
color: #e27522;
font-weight: bold;
}
.Confirmed {
color: green;
font-weight: bold;
}
.Accepted {
color: lightgreen;
font-weight: bold;
}
現在我可以使用列渲染器將<span>HTML 構建為文本字串：
columnDefs: [
{
targets: 5,
"render": function ( data, type, row, meta ) {
if (type === 'display') {
return '<span hljs-string">'">' data '</span>';
} else {
return data;
}
}
}
]
可運行的演示：
$(document).ready(function() {
$('#example').DataTable( {
responsive: true,
columnDefs: [
{
targets: 5,
"render": function ( data, type, row, meta ) {
if (type === 'display') {
return '<span hljs-string">'">' data '</span>';
} else {
return data;
}
}
}
]
} );
} );<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- responsive plug-in -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.js"></script>
<style>
.Pending {
color: #e27522;
font-weight: bold;
}
.Confirmed {
color: green;
font-weight: bold;
}
.Accepted {
color: lightgreen;
font-weight: bold;
}
</style>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Pending</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>Confirmed</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>Accepted</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>附加說明
type === 'display'邏輯是 DataTables 如何允許您創建不同于排序和過濾值的顯示值。如果你不這樣做，你會發現單詞“span”（例如）總是會找到所有行——因為我們是如何構建顯示資料的。但如果資料型別不是display，那么我們只使用底層資料值（不帶<span>文本）。您可以在此處閱讀有關此“正交資料”的更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489716.html
上一篇：在d3圖表層次結構中添加子類