jquery - C#- jQuery DataTable - 仅对列的特定标题标题单元格应用 CSS 样式(不是列中的单元格数据)

Question

这里是关于我的开发环境的信息:

微软 Visual Studio 专业版 2013

.NET 框架 4.0

jQuery-2.1.4.min.js

jQuery 数据表 1.10.7

Newtonsoft.Json.7.0.1

jQuery 用户界面 1.11.2

<table class="table mb-none" id="InfoTable">
                                    <thead>
                                        <tr>
                                            <th><i class="fa fa-street-view     text-muted mr-sm"></i>DRIVER</th>
                                            <th><i class="fa fa-calendar     text-muted space-right"></i>DATE</th>
                                            <th><i class="fa fa-clock-o     text-muted space-right"></i>DUTY CYCLE</th>
                                            <th><i class="fa fa-exclamation-    circle text-muted space-right"></i>VIOLATIONS</th>
                                            <th><i class="fa fa-pencil text-    muted space-right"></i>SIGN</th>
                                            <th class="center"></th>
                                        </tr>
                                    </thead>


                                    <tbody>
                                        <tr class="gradeX">

..............................................
........................................
..............................

我们的要求是将某些 CSS 样式应用于列的特定标题单元格。

                var populateInfoTableJS = function () {
                    $('#InfoTable').DataTable({
                        "aoColumns": [
                                        { "sTitle": "LogBsonValueId" },
                                        { "sTitle": "UserID" },
                                        { "sTitle": "DRIVER" },
                                        { "sTitle": "DATE" },
                                        { "sTitle": "DUTY CYCLE" },
                                        { "sTitle": "VIOLATIONS" },
                                        { "sTitle": "SIGN" },

有人可以告诉我如何以 CSS 样式只能应用于列的特定标题单元格的方式实现代码吗？

更新的后续问题:

                    var populateInfoTableJS = function () {
                        $('#InfoTable').DataTable({
                          "aoColumns": [
                                        { "sTitle": "LogBsonValueId" },
                                        { "sTitle": "UserID" },
                                        { "sTitle": "DRIVER" },
                                        { "sTitle": "DATE" },
                                        { "sTitle": "DUTY CYCLE" },
                                        { "sTitle": "VIOLATIONS" },
                                        { "sTitle": "SIGN" },
                                ],
            "aoColumnDefs": [{ "bVisible": false, "aTargets": [0, 1] }],
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                $('tr th:nth-child(1)').addClass('fa fa-street-view text-muted mr-sm');
            },
......................................
................................

我尝试了上述代码摘录中的代码，但如果您查看下图(查看奇怪的压缩驱动程序列)，它的渲染效果非常差:

您能否建议我如何更改代码以改进列标题的呈现方式？

Answer 1

正如 Allan(DataTables 的开发者)所述here 并没有真正的内置方法来做到这一点:

Use a little bit of jQuery in initComplete to select the cells and add the classes, or use column().header() to get the cell and then a bit of jQuery to add the class.

你可以做的是设置

var table = $('#InfoTable').DataTable({
    // Removed for brevity.
});

并调用column().header()单独添加class

var header = table.column(0).header();
header.prepend("<i class=\"fa fa-street-view text-muted mr-sm\"></i>");

注意 column(0) 中的 0 是 column index selector ，您也可以传入其他类型的列选择器。

---

编辑

在你的代码中看起来像下面这样

$('tr th:nth-child(1)').addClass('fa fa-street-view text-muted mr-sm');

导致类被添加到 th 而不是 i，参见 this fiddle为了证明。考虑改成

$('tr th:nth-child(1)').prepend('<i class="fa fa-street-view text-muted mr-sm" />');

查看此 fiddle举个例子。