我try 设置一个数据表,我希望第一行(average\u sla)在提前修复,即使在排序的情况下也是如此.
我成功地完成了插件absolut.js,在我对列排序时修复整行,其中是"Average\u SLA".但当我对其他列排序时,该行不再固定.
根据这个例子(http://live.datattes.net/jotifoxa/1/edit),我可以做我想做的事情,但在我的项目中,我不能这样做.
你能帮助我吗?
Here is my code:
$( document ).ready(function() {
var namesType = $.fn.dataTable.absoluteOrder( [
{ value: "Average_SLA", position: "top" }
] );
var table = $("#tableSla").DataTable({
pageLength: 25,
fixedHeader: false,
aaSorting: [],
//orderFixed: {pre: [0, "asc"]},
columnDefs: [
{ type: namesType, targets: 0 },
{ "width": "20%", "targets": 0 },
],
createdRow: function (row, data, index) {
if (data[0] == "Average_SLA") {
$(row).addClass("average-css");
}
}
});
});
.average-css{
font-weight:600 !important;
background-color:#333 !important;
color:white !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Meta to not put the web page in the browser cache -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<!-- Meta refesh ths page automatically - in sec. -->
<meta http-equiv="refresh" content="240">
<!-- set CDN for datatable librairie -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/r-2.2.2/dt-1.10.18/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/sorting/absolute.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<!-- call librairie datatable and set columns order -->
</head>
<body style="font-family: colibri, Arial, Helvetica, sans-serif;" >
<!-- Title and update -->
<div class="row" style="padding:0; font-size:13px;">
<h3 class="col-md-6" align="left" >SLA</h3>
<p class="col-md-6" align="right" style="color:#696969">Last update : 2022-06-03 10:08</p>
</div>
<!-- Table -->
<table id="tableSla" class="table table-condensed table-bordered table-hover text-center" style="font-size: 14px; width:100%">
<thead class="table-secondary">
<tr><th style="text-align:center">Process</th><th style="text-align:center">PC10519</th><th style="text-align:center">PC10520</th><th style="text-align:center">PC10523</th><th style="text-align:center">PC0524</th>
</tr>
</thead>
<tbody><tr><td style="text-align:left;padding:5px;padding-left:10px;">Average_SLA</td><td class="average-css" style="text-align:center; padding:5px;">97.94 %</td><td class="average-css" style="text-align:center; padding:5px;">98.29 %</td><td class="average-css" style="text-align:center; padding:5px;">97.28 %</td><td class="average-css" style="text-align:center; padding:5px;">99.08 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#1</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#2</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.34 %</td><td style="text-align:center; padding:5px;">No Sla</td><td style="text-align:center; padding:5px;">No Sla</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#3</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.35 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.23 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.35 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.67 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#4</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#5</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.32 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.43 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.44 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.83 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#6</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.34 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">99.76 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">97.99 %</td><td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.41 %</td></tr><tr><td style="text-align:left;padding:5px;padding-left:10px;">Process#7</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td><td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td></tr>
</tbody>
</table>
</body>
</html>