Dropdown Sort

Dropdown Sort

baloleanucornelbaloleanucornel Posts: 2Questions: 0Answers: 0
edited August 2011 in Plug-ins
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 !

Replies

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin
    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
  • baloleanucornelbaloleanucornel Posts: 2Questions: 0Answers: 0
    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 !
This discussion has been closed.