Dropdown Sort

baloleanucornel

Hello Allan,

First of all, thank you for such an excellent tool. I've been using it in several websites and it's been great. The forum area has a lot of help and usually i manage just with that, but this time i have to ask a question.

There are a lot of samples related to sorting but somehow i can't seem to make it work for me.

For example, doing the following will results in a JS Error: "Cannot set property 'aaSorting' of null"
[code] dtTable.fnSort( [ [0,'asc'], [1,'asc'] ] );[/code]

I have a table with 40-50 columns out of which only the first 2 are visible. The rest are hidden and are used only for searching purposes. I wanted to add a dropdown in the page and offer a couple of sorting options (3 to be more precise). Basically the user will always see the first 2 columns but he will be able to select an option and sort those by columns 8, 10 and 12.

[code]

Sort By...
Author
Most Recent
Course Name

[/code]

I tried using fnSortListener on this select, i tried using the fnSort but nothing is working. Spent the last 3hrs on the forum for this.

Here is the current code that i have:

[code]
var dtTable;
dtTable = $('.display').dataTable()
renderCourses();

function renderCourses(searchParam) {

$.getJSON("coursesBrowseJSON.asp", null, function (json) {
$('.display').dataTable({
"bProcessing": true,
"bFilter": true,
"bDestroy": true,
"bJQueryUI": true,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 500,
"sDom": '<"clear">ifrtif<"clear">',
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
});
}

function sortCourses(sortParam) {
dtTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
}
[/code]

If anybody can help it would be awesome.

Thanks ! Keep up the good work !

allan

Try this:

[code]
var dtTable;
dtTable = $('.display').dataTable()
renderCourses();

function renderCourses(searchParam) {

$.getJSON("coursesBrowseJSON.asp", null, function (json) {
dtTable = $('.display').dataTable({
"bProcessing": true,
"bFilter": true,
"bDestroy": true,
"bJQueryUI": true,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 500,
"sDom": '<"clear">ifrtif<"clear">',
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
});
}

function sortCourses(sortParam) {
dtTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
}
[/code]

Only difference is the signing of dtTable in the getJSON callback. Otherwise dtTable references the old table - which no longer exists since you destroyed it :-)

Allan

baloleanucornel

Wow.. You're fast :)
I tried it 1-2hrs ago like that but somehow it still wasn't working... Guess i'm too tired and making (stupid) mistakes. It worked now ! Thanks !