Using Select Dropdown to sort columns

dvmcm

Hello,

I can't seem to get any of the code working to get a select dropdown to sort my columns instead of using the onclick table headers.

I'm not sure what I exactly need to be calling and the examples I've seen seem incomplete or overly complicated (or maybe it really is :) )

I have this so far (i know very lame atm)

$('#subsection').dataTable( {
"sPaginationType": "full_numbers"

} );
$('#sortBy').change( function() {
oTable.fnFilter( this.value, 2 );
} );

HTML:

Sort By...
Product Name
Price





Name
Price




etc.....

Any help would would greatly, greatly appreciated! Thanks so much.

-Danielle

fbas

[quote]dvmcm said:
$('#sortBy').change( function() {
oTable.fnFilter( this.value, 2 );
} );[/quote]

I'm surprised this doesn't work, unless you don't have oTable defined.

dvmcm

Well, it works but not the way i need it to. All I want is the select dropdown to sort columns 2 and 3 by asc/desc not a specific search value.

Thanks!

fbas

Ahh, instead of fnFilter, use fnSort. It takes an array of sort values (each is an array of column and direction).

[code]
var oTable;

$(document).ready(function() {
oTable = $('#example').dataTable();

/* Sort immediately with columns 2 and 3 */
oTable.fnSort( [ [2,'asc'], [3,'asc'] ] );
} );
[/code]

dvmcm

Ah, ok. Definitely being really dense here but how would I grab that and make the select work?

/* use dropdown to sort colums asc or desc */

Sort By...
Product Name
Price


So far I have:
var oTable = $('#subsection').dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Search Records:"
},
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').css("display", "none");
}
}
} );
oTable.fnSort( [ [2,'asc'], [3,'asc'] ] );

Again, thank you so much!

fbas

[code]

Sort By...
Product Name (asc)
Product Name (desc)
Price (asc)
Price (desc)

[/code]

--EDIT-- : original version used $(this).val, which is an error, changed to $(this).val()
[code]
$('#sortBy').change( function () {

switch ($(this).val()) {
case "_none_": // first option chosen, not associated with any column, do some default
oTable.fnSort( [ [0,'asc'] ] );
break;

case "name_asc":
oTable.fnSort( [ [2,'asc'] ] );
break;

case "name_desc":
oTable.fnSort( [ [2,'desc'] ] );
break;

case "price_asc":
oTable.fnSort( [ [3,'asc'] ] );
break;

case "price_desc":
oTable.fnSort( [ [3,'desc'] ] );
break;
}

});
[/code]

dvmcm

Man, i am just plain bad at this because i still can't get it working:

jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages = 10;
var oTable = $('#subsection').dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Search Records:"
},
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').css("display", "none");
}
}
} );

$('#sortBy').change( function () {

switch ($(this).val) {
case "_none_": // first option chosen, not associated with any column, do some default
oTable.fnSort( [ [0,'asc'] ] );
break;

case "name_asc":
oTable.fnSort( [ [1,'asc'] ] );
break;

case "name_desc":
oTable.fnSort( [ [1,'desc'] ] );
break;

case "price_asc":
oTable.fnSort( [ [2,'asc'] ] );
break;

case "price_desc":
oTable.fnSort( [ [2,'desc'] ] );
break;
}

});

HTML:

Sort By...
Product Name (asc)
Product Name (desc)
Price (asc)
Price (desc)




No Sort
Name
Price





ect...

Clicking on the headers (Name, Price) does still sort correctly though.

If I add :
/* Sort immediately with columns 2 and 3 */
oTable.fnSort( [ [1,'asc'], [2,'asc'] ] );

I get an error:
Error: a.aoColumns[t] is undefined

So sorry. Thanks again :)

fbas

my mistake and I am sorry because it was causing your errors (headers not clickable). $(this).val() should be a function, not a value

[code]
switch ($(this).val()) {
[/code]

dvmcm

Works perfectly!

I want to thank you again for taking the time to help me. You're a life saver!

fbas

Glad to help.


.val() and .html() are 2 of the most useful JQuery functions to use for DOM elements

.val() is the value of an element, i.e. .val() will be "Donuts". this is very useful for input elements which maintain a value, but don't keep values between an opening and closing tag

.html() is the innerHTML of a DOM element Link .html() will be "Link", useful for most other HTML tags which keep some inner text/html between tags.

you can use these functions to set the value or html as well by passing a value to the function.
[code]
$('#whattoeat').val('Cake');
$('#mylink').html('Read my file');
[/code]

you can get/set other attributes with .attr() [[[ so .val() is basically .attr("value") ]]]
[code]
$('#mylink').attr('href', 'textfiles/file.txt');
[/code]