Sort Callback

dwaddell

Is there a sort callback that I am overlooking?

I would like to do some things after a column has been sorted. I have gotten around some issues by binding a click event to the th tags however I have ran into a new issue that I would like to do that would involve needing a callback. I could use a timeout but I'd rather avoid that if possible.

Has anyone else ran into this?

Could I use fnRowCallback or fnDrawCallback?

Thanks,
Drew

allan

Hi Drew,

Use fnDrawCallback. That is called at the end of every draw, and a draw will occur after a sort. It's possible to refine it more by checking 'this.oSettings.bSorted' (inside the callback, which is executed in the DataTables object scope for 'this'). That flag will be true if the draw is due to a sort, false otherwise.

This is something I want to look at improving in future, providing event bindings for DataTables is very much on the to-do list for DataTables 2 - whenever that happens... :-)

Allan

dmclean

I would totally vote for an event binding for sorting.

Totally.

fbas

I would vote for a whole series of bindable events, in addition to the callback functions available.

dmclean

I have a question involving the code shown below. Based on Allan's response, shouldn't it work - or am I missing something? I get an error (this.oSettings is undefined)

[code]
"fnDrawCallback": function() {
console.log("[fnDrawCallback] enter: " + this.oSettings.bSorted);
}
[/code]

fbas

oSettings is not a member of your DataTable. you can get it via fnSettings(), though

[code]
"fnDrawCallback": function() {
console.log("[fnDrawCallback] enter: " + this.fnSettings().bSorted);
}
[/code]

or assign oSettings = this.fnSettings();

dmclean

Very good. Thank you!

allan

It's also passed as the first parameter of fnDrawCallback if you want to get it that way.

Events: yup - this is becoming increasingly important. It is in the crosshairs for the next major version.

Allan

smiller

Can somebody please just show the code on how to do this?
I need to call this function after a sort:

function stripeTableResults() {
$("[class='item']:even").addClass("alternateItemRow");
}

I currently do this from:
$(function () {
stripeTableResults();
});

But of course a sort mixes up the striping.
So I need a call back after a sort.

I just can't figure out how to do this.
This is incredibly fustrating.
Come on. This is rediculous.

smiller

I mean how do you get at it from fnSettings?

fbas

I believe any sort will trigger the fnDrawCallback. try using that callback for your purposes.

http://www.datatables.net/ref#fnDrawCallback

smiller

Thanks, that helped.

I have

$(function () {
$("#tblResults").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"fnDrawCallback": stripeTableResults()
});
});

function stripeTableResults() {
$("[class='item']:even").addClass("alternateItemRow");
}

But now, the striping is messed up after a sort.
Apparently the rows are displayed in the new sorted order but internally they are really considered the same order as the original layout.
so the jQuery statement:
$("[class='item']:even").addClass("alternateItemRow");
shows the stripes all out of wack.

smiller

Oh, now I see fnDrawCallback is only getting called on the initial draw.
Not the redraw.

function stripeTableResults() {
$("[class='item']").removeClass("alternateItemRow");
alert('removed class');
$("[class='item']:even").addClass("alternateItemRow");
alert('added class');
}

fbas

is there a reason you are trying to locate the even lines then add your class to them, rather than just edit the CSS definition for the even rows?

smiller

Would that small little splitting of hairs even make a difference since the fnDrawCallBack is only called once initially rather then after every draw like this thread and the documentation says?

fbas

I think it would make a big difference in terms of ease of implementing it on your end. Rather than figure out how to hook your class name code into the system, just edit the CSS file.

smiller

Well I did what you said and yes it was easier:
tr.odd
{
background-color:#E6E6E6;
}

But I would still like to know why that callback does not work on every draw.
It is only called once on the initial setup.

Maybe it is just the order how things are laid out.

allan

fnDrawCallback is called on every draw (i.e. filtering, paging, sorting etc), however you have:

[code]
"fnDrawCallback": stripeTableResults()
[/code]

now unless "stripeTableResults" returns a function, then this is not what you want. You are executing "stripeTableResults" and then assigning the result to fnDrawCallback. I would imagine that you just want to pass the function by reference:

[code]
"fnDrawCallback": stripeTableResults
[/code]

Allan

GoA

I need that kind of callback too. The problem is that fnDrawCallback is called on any redraw event. My data are added via fnAddData, and using fnDrawCallback, I cannot tell if fnDrawCallback is triggered by a sort or by adding data.

Checking for bSorted doesn't help since it is always true.

allan

With DataTables 1.8.2 (possibly 1.8.0+ can't quite remember off the top of my head!) you can listen for the 'sort' event:

[code]
$('#example').dataTable().bind('sort', function () {
// DataTables has done a sort
} );
[/code]

Note that you won't get the event on the first initialisation, since the listener won't have been bound by then.

Allan

GoA

Thanks allan, this is working.

Naresh

I am having the same issue. When i tried below code, the custom function is getting called before sort is done. However i need the function to be called after sort is complete. Any suggestions plz?

$('#example').dataTable().bind('sort', function () {
// DataTables has done a sort
} );