How to fixed first row at the top of Datatable-CodePudding

I try to set up a datable table and I would like the first line (average_sla) to be fixed in premanence, even in case of sorting.

I succeeded in the plug-in absolut .js, to fix the whole line when I sort the column where is "Average_SLA". But when I sort the other columns the row is no longer fixed.

According to this example (http://live.datattes.net/jotifoxa/1/edit), it is possible to do what I want but on my project, I cannot do it.

Can you help me?

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   style="padding:0; font-size:13px;">
                    <h3  align="left" >SLA</h3>
                    <p  align="right" style="color:#696969">Last update : 2022-06-03 10:08</p>
                </div>

                <!-- Table -->
                <table id="tableSla"  style="font-size: 14px; width:100%">
                    <thead > 
                        <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  style="text-align:center; padding:5px;">97.94 %</td><td  style="text-align:center; padding:5px;">98.29 %</td><td  style="text-align:center; padding:5px;">97.28 %</td><td  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>

CodePudding user response：

Add them as <tfoot> like below:

$(document).ready(function() {
 
  var table = $("#tableSla").DataTable({
    pageLength: 25,
    fixedHeader: false,
    aaSorting: [],
    //orderFixed: {pre: [0, "asc"]},
    columnDefs: [
      {
        "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  style="padding:0; font-size:13px;">
    <h3  align="left">SLA</h3>
    <p  align="right" style="color:#696969">Last update : 2022-06-03 10:08</p>
  </div>

  <!-- Table -->
  <table id="tableSla"  style="font-size: 14px; width:100%">
    <thead >
      <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>
    <tfoot style="display: table-row-group">
      <td  style="text-align:left;padding:5px;padding-left:10px;">Average_SLA</td>
      <td  style="text-align:center; padding:5px;">97.94 %</td>
      <td  style="text-align:center; padding:5px;">98.29 %</td>
      <td  style="text-align:center; padding:5px;">97.28 %</td>
      <td  style="text-align:center; padding:5px;">99.08 %</td>
    </tfoot>
    <tbody>
      <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>