Forums

You can call the sortColumn method in response to initEvent. It is likely to produce a flicker since the table will be drawn unsorted and then redrawn sorted. Depending on the size of your data it might be noticeable or not. Actually, noticeable it will be, it might be annoying or not.

Another alternative is to override method doBeforeCallBack from DataSource. The default method does nothing but return its parsedResponse argument unchanged. This method is meant to be overridden, it is a hook placed there to do this kind of manipulation and whatever it is you return from that method is what the DataTable will see.

The parsedResponse argument is an object with several properties, one of which is going to be an array containing all your data. You can sort that array with JavaScript native Array.sort function and return the parsedResponse object with the sorted array within. This will be faster and will not produce any flicker as the DataTable would not have been drawn yet.

Ah sorry to be a pain. My Datasource is a multi-dimensional json array. It doesn't seem I can use the basic array.sort methods to sort by a given field in this JSON array.

So I am trying your first suggestion but am not getting anywhere, mind you its my first time working with initEvent and the sortColumn method. I thought I would just be able to subscribe to the initEvent and call the method, but that seems to be returning an error. Here's a snippet of some of the code I have so far:



And here's the error I get in Firebug:
"Invalid callback for subscriber to 'initEvent'"

I've been using YUI for a while now, but mostly working off of examples so in theory I'm still a newbie.
Thanks for the helping hand.

Thanks Satyam,

I took more time to research the implementation of all this as it is a first. So I'll just break down some sources and code in case it will help anyone else reading this post.

At first I was unfamiliar with doBeforeCallback, so I researched it more and ran into another one of your posts about datatables which had an example using the doBeforeCallback. That post was here:

http://yuiblog.com/blog/2008/10/15/data ... -part-one/

From there I just console.log'ged what I needed. For example, I wasn't sure of the structure of 'oParsedResponse' so I checked it out and found out that all my results are in objects in 'oParsedResponse.results'.

I then needed a little 101 on JS array sorting. The 'brain block' in my head was how can I sort this out if it's in a multi-dimensional array or in this case multiple objects. All the sort examples I've seen on the net are all straight forward non associative arrays.

If you're new to array sorting a good example and explanation for array sorts can be found here http://www.javascriptkit.com/javatutors/arraysort.shtml. Turns out the Array.sort method accepts a parameter which can take in a custom method which from what I can tell compares values and acts depending whether the result is negative, 0, or positive. From there, with some more console.logging I ended up with the following code which is now working well:


The main thing to look at that I needed in order to sort my dataset is the 'myDataSource.doBeforeCallback' and the sortPts method.
If you look at my function sortPts you'll see that you can sort by comparing object values. All in all a productive day!
Thanks Satyam

I don't recall any significant changes since the posts above. The code in the codebox of the posting before your question should still work and produce no flicker at all.

The DataTable never sorted records when the sortedBy configuration attribute was given. The idea for that attribute is for the DataTable to reflect the sorting done server-side, it was never a command to get data sorted. That is still the best alternative, adding an ORDER BY clause to your SQL statement is still the best, but, if you need to do it client side, the code above should work nicely.