Javascript 如何将类添加到 jquery.datatables 列?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14231660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 16:06:28  来源:igfitidea点击:

how to add class to jquery.datatables columns?

javascriptjqueryhtmlcssdatatables

提问by Homam

I made a large table for jquery.datatables which is works great for me.
but i need a class name set to each td element relative to its column.
fo example i want a column (including th and all td's) have a class="volume".
there is this issues:
i use this code to initialize the class but it is not working.

我为 jquery.datatables 制作了一个大表,这对我很有用。
但我需要为每个 td 元素相对于其列设置一个类名。
例如,我想要一列(包括 th 和所有 td)有一个class="volume".
有这个问题:
我使用这段代码来初始化类,但它不起作用。

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

EDIT:my table is created and refeshes dynamically. and it is made of a js-array which i prefer not to touch it ie. just to add class names
EDIT:
iuse this code to itialize my table:

编辑:我的表已创建并动态刷新。它由一个 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"]]
});

i hope it helps *EIDT: *
columnsHdis an array which is created dynamicaly from my json headers and now is exactly:

我希望它有帮助 * 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" },
 ] 

回答by Daniel

My guess is that "aoColumns": columnsHd, overrides the "aoColumnsDefs": [ { "sClass": "volume", "aTargets": [2] } , ],

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

Try to replace their order in code

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

Or just add the class directly in "aoColumns": columnsHd,like this "sClass": "volume"

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

complete code :

完整代码:

try changing { "sTitle": "ip" },into { "sTitle": "ip", "sClass": "volume" },

尝试{ "sTitle": "ip" },改成{ "sTitle": "ip", "sClass": "volume" },

and remove the

并删除

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


Note that in datatables 1.10 you should use aoColumnDefs

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

回答by 3 rules

The answer for the question is

问题的答案是

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

to use other options: (ref datatable)

使用其他选项:(参考数据表

enter image description here

在此处输入图片说明