Space in the class name

novice

I have a simple datatable and I have assigned class names to each of the columns. My issue is that when I inspect the element in Firebug I notice it's prefixing each class name with a white space, I have no idea where it's coming from.

allan

DataTables uses className for some operations to try and get as much speed as possible where it hits the DOM a lot (using jQuery would work, and prevent the problem, but its significantly slower). Hence there is a bit of white space there. If it becomes a problem, then I'll look at how to improve it - although that would certainly effect speed.

Allan

novice

Hi Allan,

Thanks for your response. So now the problem is that I am now being able to get the value of that column due to that space. This is my code ...can you please suggest the best way to get to the id ?

srch2 = "#Project_scope";
$('#projscope table').ready(function() {

var oTable = $(srch2).dataTable({

"aoColumns":[{ "sWidth": "10%", "sTitle": "EmpID", "sName":"EmpID", "sClass":"EmpID" , "aTargets": [ 0 ],},
{ "sWidth": "10%", "sTitle": "Product", "sName":"Salary", "sClass":"Salary"},
],

"bJQueryUI":true,
"bPaginate":true,
"bLengthChange":true,
"bFilter":true,
"bSort":true,
"bInfo":true,
"sPaginationType":"full_numbers",
"bAutoWidth":true,
"bSortClasses":false,
"aaSorting": [[0,'desc']],

"fnDrawCallback":function(oSettings) {
$('#Project_scope tbody tr').bind('click', function () {

var empid = $(this.parentNode.parentNode).children(".EmpID").text();
alert (custid);

});
}


});

});

ElliotLewis

Same issue for me. If Datatables code is written in JQuery or straight JS I'm not sure why a space gets introduced to the class name. I can see DataTables adding and removing class' at different states. Is the space addition in your code or is this a browser quirk?

So this code would not work (actually on first load sometimes it did! Before the class was effected):
[code]
$('table').on('mouseover', 'a', function(e){
if( class_name = $(this).parent().attr('class') == 'name' ){
// do something
}
})
[/code]

This might have someone bug hunting so it would be good to 'fix'. There is an easy work-around:

[code]
$('table').on('mouseout', 'a', function(e){
var class_name = $(this).parent().attr('class');
if( class_name == 'name' || class_name == 'name ' ){
// do something
}
})
[/code]

allan

I'd suggest using $(...).hasClass() rather than getting the class attribute. DataTables manipulates the className property of elements for speed - it is significantly faster than going through jQuery for the number of manipulations DataTables has to do - but the downside is that there must be a space added, since otherwise the classes might be concatenated. hasClass is the solution I'd recommend.

Allan

ElliotLewis

Thanks Allen. That's a much better solution. Mine was more, ' hammer to crack a nut' technique :D