如何固定数据表顶部的第一行

Question

我尝试设置一个 datable table 我希望第一行 (average_sla) 固定在预存状态，即使在排序的情况下也是如此。

我在插件absolut.js 中成功修复了当我对“Average_SLA”所在的列进行排序时整行。但是当我对其他列进行排序时，该行不再固定。

根据这个例子（http://live.datattes.net/jotifoxa/1/edit），可以做我想做的事，但在我的项目中，我做不到。

你能帮帮我吗？

这是我的代码:

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

Answer 1

将它们添加为 <tfoot>，如下所示：

$(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 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>
    <tfoot style="display: table-row-group">
      <td class="average-css" 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>
    </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>

如何固定数据表顶部的第一行

How to fixed first row at the top of Datatable

html

datatable

jquery