Adding user defined class to an element that currently has no class adds a space to the beginning.

sinfuljosh

Not a breaking bug but can cause issues with css selectors if not taken into account.

When you use className on a table column like the following:

                {
                    data: null,
                    className: "dt-center editor-delete align-middle",
                    defaultContent: '<i class="fa fa-trash" style="font-size: 1.25rem;" role="button"/>',
                    orderable: false
                }

When it applies the class to the finished html you will end up with a space at the front of the class. This creates a double dot in the css selectors and can also throw off the "begins with" selector.

<td class=" dt-center editor-edit align-middle">

Simple fix is to check for existing classes when adding the new classes to determine if a space is needed.
in jquery.dataTables.js on around line 3162. I changed this:

                /* Add user defined class */
                if ( oCol.sClass )
                {
                    nTd.className += ' '+oCol.sClass;
                }

To this:

                /* Add user defined class */
                if ( oCol.sClass )
                {
                    nTd.className += (nTd.className.length > 0 ? ' ' : '') +oCol.sClass;
                }

I am by no means a programmer and I am sure there is a better means to achieve this but this was the most efficient method I could think of.

allan

Hi,

Normally this isn't an issue since classes are space separated. The only case I can think of this being a problem is if you are using an attribute selector on the call such as div[class^=dt-center]. Is that what you are doing? Are you trying to prioritise the order of the classes over the specificity rules that the browser automatically apples for class order?

Allan

sinfuljosh

Like you said, and I mentioned, its not a breaking bug, but was something I did discover when using the attribute selector.

And so far I have only find the attribute selector is the only instance where this causes an issue (and can be bypassed using class*=dt- instead of class^=dt-. As I said I am not proficient in javascript to know if this would break other items.

I just figured I would post this along with how i adjusted it.

And looking at the above code, could it even be simpler to use (would it work without the length??)

    nTd.className += (nTd.className ? ' ' : '') +oCol.sClass;

allan

Thanks! The reason I did that before was just a little optimisation since it means one less DOM read, and I couldn't really see any disadvantage to it. That said, I think I might have inadvertently "fixed" it with this commit last week: http://live.datatables.net/qabahosi/1/edit .

Allan