Sorting on Parts of the data

Dunhamzzz

I'm making a database of netbooks/laptops and wish to allow users to sort the table by Screen size, processor, ram, weight etc.

The only thing is that in my tables I display these as numbers with their units, ie "1.6Ghz" or "1kg" which makes sorting on certain columns impossible.

eg:
[code]
Dell Inspiron Mini 1010
Intel Atom Z530 1.6Ghz
2GB 10.1'' HD
(1366 x 768)


Intel GMA 500
261 x 182 x 33
1.3kg
[/code]
Is it possible to specify parts of the data to do the sort on? EG Intel Atom 1.6 so that the processor columns will be sorted by the amount as opposed to the whole string.
Same thing is need for weight, screen size etc.

Belisarius

Hi,

Have a look at http://datatables.net/plug-ins/sorting

You can write your own sort plugin. I did one for sorting data such as '4/TTT/34' where it splits each part and then orders on each in turn.
[code]
/*
* Function: fn.dataTableExt.aTypes
* Purpose: Sort by box reference
* Returns: array:
* Inputs: object:oSettings - DataTables settings object
*/

jQuery.fn.dataTableExt.aTypes.push(
function ( sData )
{
var sValidCharsDir = "12345";
var sValidCharsServ = "ABCDEFGHIJKLMNOPQRSTYVWXYZ";
var sValidCharsBoxNo = "123467890";
var Char;

var boxRef = sData.split('/');

// check enough parts
if (boxRef.length !=3) return null;

if (sValidCharsDir.indexOf(boxRef[0]) == -1)
{
return null;
}

for ( i = 0 ; i < boxRef[1].length ; i++ )
{
Char = boxRef[1].charAt(i);
if (sValidCharsServ.indexOf(Char) == -1)
{
return null;
}
}

for ( i = 0 ; i < boxRef[2].length ; i++ )
{
Char = boxRef[2].charAt(i);
if (sValidCharsBoxNo.indexOf(Char) == -1)
{
return null;
}
}

return 'box_ref';
}
);

function Right(str, n){
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}

jQuery.fn.dataTableExt.oSort['box_ref-asc'] = function(a,b) {
var boxRefa = a.split('/');
var boxRefb = b.split('/');

var x1 = boxRefa[0];
var y1 = boxRefb[0];


var x2 = boxRefa[1];
var y2 = boxRefb[1];


var x3 = ("00000" + boxRefa[2]);
var y3 = ("00000" + boxRefb[2]);

var x = x1 + x2 + Right(x3, 5);
var y = y1 + y2 + Right(y3, 5);

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


};

jQuery.fn.dataTableExt.oSort['box_ref-desc'] = function(a,b) {
var boxRefa = a.split('/');
var boxRefb = b.split('/');

var x1 = boxRefa[0];
var y1 = boxRefb[0];


var x2 = boxRefa[1];
var y2 = boxRefb[1];


var x3 = ("00000" + boxRefa[2]);
var y3 = ("00000" + boxRefb[2]);

var x = x1 + x2 + Right(x3, 5);
var y = y1 + y2 + Right(y3, 5);

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

It's probably not the neatest code but it works and I've yet to find time to go back and sort it. For different units you could probably id the unit and multiply the value accordingly so all are the same.

Hope that helps and makers sense!

Andy

Dunhamzzz

You've grossly over estimated my time frame!

allan

Hi Dunhamzzz,

Have a look at this sorting plugin: http://datatables.net/plug-ins/sorting#hidden_title . It will take the "title" attribute from an empty and do the sorting on the information in the title. It's numeric - but if you want to do it on strings as well, it should be easy enough to change (just copy/paste the code from some of the other sorting examples :-) ).

Regards,
Allan

Dunhamzzz

That's the plugin I can't seem to get working
I've been trying to get it to sort the RAM column but I keep getting a javascript error in firebug.
This is my init js:
[code]
$(document).ready(function() {
$('#products').dataTable({
"bJQueryUI": true,
"bAutoWidth" : false,
"bInfo" : false,
"sPaginationType": "full_numbers",
"aaSorting" : [[ 1, "asc" ]],
"aoColumns": [
/*image*/ { "bSortable" : false },
/*model*/ { "sType" : "html" },
/*cpu*/ null,
/*ram*/ { "sType" : "title-numeric" },
/*screen*/ { "sType" : "num-html" },
/*hdd*/ null,
/*gma*/ { "sType" : "num-html" },
/*dimen*/ null,
/*weight*/ { "sType" : "num-html" },
/*ports*/ { "bSearchable" : false, "bSortable" : false },
/*check */ { "bSortable" : false }
]
});
} );[/code]

and the for the RAM is produced like so:
[code]2GB[/code]

When I click on the RAM to sort I get the error:
"a is not defined" @ var x = a.match(/title="(.*?)"/)[1];\r\n (first line of the title-numeric-asc function)

Thanks very much for your help.
btw check my progress here: http://buyersguide.umpcmedia.com/ it's looking very good and dataTable is awesome!

Dunhamzzz

Figured it. Worked it out by looking at some of the other plugins.

The code on the plugins page for the title-numeric is WRONG.

It reads:
[code]jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(x,y)[/code]

at the start of both functions but should read:
[code]jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b)[/code]

(with a,b being the inputs at the end of the line as opposed to x,y.

Be sure to update!

allan

Hi Dunhamzzz,

There was actually an error in the plug-in code. The parameters being passed in should have been called 'a' and 'b', not 'x' and 'y'. I've updated the code on the sorting plug-ins page now.

Regards,
Allan

Dunhamzzz

Beat you to it!

TomC

Hehe, although it wasn't part of your question you left out the most important statistic in your table. Price! I know you can get Netbooks for different prices at different stores but as a price conscious consumer it is usually the first column I look for.