我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>

推荐答案

将其添加为<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>

Html相关问答推荐

你能让Cypress测试为p—fileUpload做文件上传吗?

为什么使用Google字体的SVG徽标内的文本不能在网页上正确呈现?

未显示新组件的视图

如何在一张表中逃脱边境坍塌--崩溃?

尽管div高度为100%,div中的内容仍会溢出

如何生成随机字符串的字母数字字符集长度到html跨度?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

是否可以只使用css而不使用像&;nbsp;这样的HTML符号来实现断字而不换行空格?

rmarkdown HTML数字不适用于针织衫_1.44

如何将 元素与常规文本垂直对齐

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中?

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

从垫分页器中删除输入边框

如何在 css 和 html 中创建花状 struct

为什么使用 Css 只能看到 1 列而不是 3 列?

输入框不是全宽

如何删除输入中输入类型数字中的箭头?

如何为某些行具有 rowspan 的表的每个奇数行着色

我怎么能有 :not(.class):nth-of-type(even)?