Question

以下是有关我的开发环境的信息：

Microsoft Visual Studio Professional 2013

.NET Framework 4.0

jQuery的2.1.4.min.js

jQuery DataTables 1.10.7

Newtonsoft.Json.7.0.1

jQuery UI 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');
            },
......................................
................................

我在前面提到的代码摘录中尝试了代码，但是如果你看下面的图像它会呈现得很差（看看奇怪的压缩驱动程序列）：

docs

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

Answer 1

如Allan（DataTables的开发者）here所述，并没有真正的内置方法可以做到这一点：

在initComplete中使用一点jQuery来选择单元格并添加类，或者使用column().header()来获取单元格，然后使用一些jQuery来添加类。

你可以做的是设置

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

并致电column().header()以单独添加课程

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

请注意0中的column(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。

Answer 2

感谢@ jia-jian的帮助。

我的一位同事在工作中找到了以下解决方案：

var populateInfoTableJS = function () {
                    $('#InfoTable').DataTable({
                      "aoColumns": [
                                    { "sTitle": "LogBsonValueId" },
                                    { "sTitle": "UserID" },
                                    { "sTitle": "DRIVER" },
                                    { "sTitle": "DATE" },
                                    { "sTitle": "DUTY CYCLE" },
                                    { "sTitle": "VIOLATIONS" },
                                    { "sTitle": "SIGN" },
                            ],
                       "headerCallback": function (thead, data, start, end, display) {
                        $(thead).find('th').eq(2).html('<i class="fa fa-male text-muted space-right"></i>DRIVER');
                        $(thead).find('th').eq(3).html('<i class="fa fa-sitemap text-muted space-right"></i>DATE');
                    },

但是，我确实想警告其他开发人员，如果您在使用AJAX javascript函数时以编程方式使某些列在成功部分中不可见，则可能会出现问题。例如，如果希望索引值为2的列消失，则具有DRIVER标题的列将应用于占用索引值2的其他列。

C＃ - jQuery DataTable - 仅对列的特定标题标题单元格应用CSS样式（不是列中的单元格数据）

2 个答案: