[Solved] Sorting a table column

anjibman

I have a size column in the table which shows the size of the file with unit (e.g. 1KB, 10MB, 1GB etc.). Since unit part is string whole size value is input to table as the string so when the sorting is done it do String sorting.
For example for it has sorted form of like this: 5KB 500MB 6KB which is not correct. So I am wondering what will be the solution to the problem? Is there any parameter setting that can be done to solve this issue?
Thanks in advance.

allan

You'd need to use a sorting plug-in to solve this issue: http://datatables.net/development/sorting . There are two options:

1. Write a sorting plug-in which will convert GB (etc) to absolute units
2. Use the hidden title numeric sorting plug-in to sort: http://datatables.net/plug-ins/sorting#hidden_title

Allan

anjibman

Thanks Allan for the help.
I solved by adding following sorting-plugins and data type

Sorting Plugins
[code]
jQuery.fn.dataTableExt.oSort['file-size-asc'] = function(a,b) {
var x = a.substring(0,a.length - 2);
var y = b.substring(0,b.length - 2);

var x_unit = (a.substring(a.length - 2, a.length) == "MB" ? 1000 : (a.substring(a.length - 2, a.length) == "GB" ? 1000000 : 1));
var y_unit = (b.substring(b.length - 2, b.length) == "MB" ? 1000 : (b.substring(b.length - 2, b.length) == "GB" ? 1000000 : 1));

x = parseInt( x * x_unit );
y = parseInt( y * y_unit );

return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['file-size-desc'] = function(a,b) {
var x = a.substring(0,a.length - 2);
var y = b.substring(0,b.length - 2);

var x_unit = (a.substring(a.length - 2, a.length) == "MB" ? 1000 : (a.substring(a.length - 2, a.length) == "GB" ? 1000000 : 1));
var y_unit = (b.substring(b.length - 2, b.length) == "MB" ? 1000 : (b.substring(b.length - 2, b.length) == "GB" ? 1000000 : 1));

x = parseInt( x * x_unit);
y = parseInt( y * y_unit);

return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]

New data type
[code]
jQuery.fn.dataTableExt.aTypes.push(
function ( sData )
{
var sValidChars = "0123456789";
var Char;

/* Check the numeric part */
for ( i=0 ; i<(sData.length - 3) ; i++ )
{
Char = sData.charAt(i);
if (sValidChars.indexOf(Char) == -1)
{
return null;
}
}

/* Check for size unit KB, MB or GB */
if ( sData.endsWith("KB") || sData.endsWith("MB") || sData.endsWith("GB") )
{
return 'size';
}
return null;
}
);
[/code]

allan

Nice one - thanks for sharing that with us! I'll post it up on the plug-ins pages if that's okay.

Regards,
Allan

anjibman

Sure

But I have one problem with display if I add this plugin as follow. My table doesn't have sorting or any other feature it just became plain table.

[code]







$(document).ready(function() {
$('#documents').dataTable({
"sDom": 'T<"clear">lfrtip',
"aoColumns": [
null,
null,
{ "sType": "file-size" },
null,
null
]
});
});

[/code]

What I am doing wrong?

allan

If you are just getting a plain table, then that is suggesting that either:

1. There is a javascript error somewhere (open the Firebug console - it will say)
2. The #documents selector isn't right - which doesn't seem very likely :-)

Allan

anjibman

It just happening on random pages so seems like CSS problem. Will work tonight.
Thanks

anjibman

It wasn't CSS problem. It was problem in new data type check code (line 18 above). So new code is:

[code]
jQuery.fn.dataTableExt.aTypes.push(
function ( sData )
{
var sValidChars = "0123456789";
var Char;

/* Check the numeric part */
for ( i=0 ; i<(sData.length - 3) ; i++ )
{
Char = sData.charAt(i);
if (sValidChars.indexOf(Char) == -1)
{
return null;
}
}

/* Check for size unit KB, MB or GB */
if ( sData.substring(sData.length - 2, sData.length) == "KB"
|| sData.substring(sData.length - 2, sData.length) == "MB"
|| sData.substring(sData.length - 2, sData.length) == "GB" )
{
return 'size';
}
return null;
}
);
[/code]

Only change is use of substring() function.

Now everything working fine. I think we can post on the plug-ins page.

Thanks.