如何将类添加到 jquery.datatables 列？

Posted 2023-05-07

【中文标题】如何将类添加到 jquery.datatables 列？

【英文标题】：how to add class to jquery.datatables columns?

【发布时间】：2012-12-23 06:57:54

【问题描述】：

我为 jquery.datatables 制作了一个大表，这对我来说非常有用。 但我需要为每个 td 元素相对于其列设置一个类名。 例如，我想要一个列（包括 th 和所有 td）有一个 class="volume"。 有这个问题： 我使用此代码来初始化类，但它不工作。

"aoColumnsDefs": [
     "sClass": "volume", "aTargets": [2] 
]

编辑： 我的表是动态创建和刷新的。它是由一个 js-array 组成的，我不想碰它。只是添加类名编辑： 我使用此代码来初始化我的表：

$('#dataTable').dataTable(
    "aaData": dataCnt,
    "aoColumnsDefs": [
         "sClass": "volume", "aTargets": [2] 
    ],
    "aoColumns": columnsHd,
    "bStateSave": true,//saving status in coockie
    "iCookieDuration": 10,//coockie life duration in seconds
    "sScrollX": "100%",
    "sScrollY": (winHei-200),
    "sDom": '<"H"RCfrl>t<p"F"i>',
    "oColVis": 
        "buttonText": "&nbsp;",
        "bRestore": true,
        "sAlign": "left"
    ,
    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
);

希望对你有帮助 *EIDT：*columnsHd 是一个从我的 json 标头动态创建的数组，现在正好是：

[
 "sTitle": "macaddr" ,
 "sTitle": "lat" ,
 "sTitle": "ip" ,
 "sTitle": "clientname" ,
 "sTitle": "relay0mask" ,
 "sTitle": "relay0stat" ,
 "sTitle": "relay1stat" ,
 "sTitle": "clientid" ,
 "sTitle": "bldname" ,
 "sTitle": "uptime" ,
 "sTitle": "current" ,
 "sTitle": "temperature" ,
 "sTitle": "softver" ,
 "sTitle": "volume" ,
 "sTitle": "hardver" ,
 "sTitle": "relay1mask" ,
 "sTitle": "pic" ,
 "sTitle": "comment" ,
 "sTitle": "lon" ,
 "sTitle": "rtt" ,
 "sTitle": "bldaddr" ,
 ] 

【问题讨论】：

您是否尝试过模板或动态生成“表格”？你的目标到底是什么？将类标签添加到 html 列？

你知道它被添加到第三列了吗？

是的，我知道它使用基于零的索引，但我尝试了任何组合，但它没有奏效。我不知道我在哪里做错了

你确定这个类没有被应用到你的td吗？你检查过浏览器开发工具吗？

我的猜测是"aoColumns": columnsHd, overrides the "aoColumnsDefs": [ "sClass": "volume", "aTargets": [2] , ], 尝试在代码中替换它们的顺序，或者直接在"aoColumns": columnsHd, 中添加类，就像这样sClass: "volume"

【参考方案1】：

我的猜测是"aoColumns": columnsHd, overrides the "aoColumnsDefs": [ "sClass": "volume", "aTargets": [2] , ],

尝试在代码中替换它们的顺序

或者直接在"aoColumns": columnsHd,中添加类 像这样"sClass": "volume"

完整代码：

尝试将 "sTitle": "ip" , 更改为 "sTitle": "ip", "sClass": "volume" ,

并删除

"aoColumnsDefs": [
     "sClass": "volume", "aTargets": [2] 
],

---

请注意，在数据表 1.10 中，您应该使用 aoColumnDefs

【讨论】：

我更改了他们的订单 => 不工作。我更改了"aoColumns": columnsHd, like this sClass: "volume" => 整个表不工作实际上不生成

尝试将 "sTitle": "ip" , 更改为 "sTitle": "ip", "sClass": "volume" , 并删除"aoColumnsDefs": [ "sClass": "volume", "aTargets": [2] , ], 我猜它之前不起作用因为我忘记在" 之前和之后添加sClass

它的 "aoColumnDefs" 没有额外的 s。 legacy.datatables.net/usage/columns

【参考方案2】：

问题的答案是

"aoColumnsDefs": [
     "sClass": "classname", "aTargets": [whatever target you want to apply] 
]

使用其他选项：(ref datatable)