how to add class to jquery.datatables columns?

Question

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.

"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:

$('#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: *
columnsHd is an array which is created dynamicaly from my json headers and now is exactly:

[
{ "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" },
 ]

have you tried templates or dynamically generating your "table"? what exactly is your goal? adding a class tag to a html-column? — Vogel612
– Vogel612, Commented Jan 9, 2013 at 9:13
yes i know it uses a zero based indexing but i tried any combinations and it just did not worked. i don know where do i do this wrong — Homam
– Homam, Commented Jan 9, 2013 at 9:18
are you sure that the class in not being applied to your td? have you checked with browser dev tools ? — Daniel
– Daniel, Commented Jan 9, 2013 at 9:25
my guess is that "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" — Daniel
– Daniel, Commented Jan 9, 2013 at 9:42

Daniel · Accepted Answer · 2014-06-18 10:24:19Z

10

My guess is that "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"

complete code :

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

and remove the

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

Note that in datatables 1.10 you should use aoColumnDefs

edited Jun 18, 2014 at 10:24

answered Jan 9, 2013 at 9:48

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Homam Over a year ago

i have changed their order => not working. i changed "aoColumns": columnsHd, like this sClass: "volume" => whole table not working actually not generates

Daniel Over a year ago

try changing { "sTitle": "ip" }, into { "sTitle": "ip", "sClass": "volume" }, and remove the "aoColumnsDefs": [ { "sClass": "volume", "aTargets": [2] } , ], I guess it didn't work before cause I forgot to add " before and after the sClass

IAmGroot Over a year ago

its "aoColumnDefs" without the extra s. legacy.datatables.net/usage/columns

3 rules · Accepted Answer · 2017-10-26 06:47:38Z

1

The answer for the question is

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

to use other options: (ref datatable)

answered Oct 26, 2017 at 6:47

3 rules

1,3813 gold badges29 silver badges58 bronze badges

Collectives™ on Stack Overflow

how to add class to jquery.datatables columns?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related