Sorting new rows to the top

wheelermm

I know there have been quite a few discussions related to this topic already, but I have some specific questions that I am unable to figure out. I have followed the advice here - http://www.datatables.net/forums/discussion/2468/add-row-to-top-of-the-table-rows/p1, and decided that the best approach would be to just get the new row sorted to the top, but I have a couple of issues. If the user then sorts the column descending, I still want the blank line to be added at the top. However, I cannot seem to fool the sorter into using my data to sort it. For that matter, I cannot seem to get sorting to work at all without this next hack. When stepping through the _fnSort function, in the following code:

[code]
for ( i=0 ; i

wheelermm

I have also looked at these references (as per - http://www.datatables.net/forums/discussion/1588/dont-understand-ssortdatatype-documentation/p1) which I am thinking are probably along the correct lines, so I will dig into them more to see if I can get it to work.

http://datatables.net/examples/plug-ins/dom_sort.html
http://datatables.net/development/sorting (under the "Custom data source sorting" header)

allan

> In particular, how does sorting work?

The main method of sorting in DataTables is entirely string based - if you want different information to be sorted upon, then you need to manipulate the string (stripping the HTML out for example). This presents a slight difficulty when dealing with information live from the DOM that is not in the string value, such as the 'value' of an INPUT element (the user might have changed it, and that is not reflected in the HTML). For that DataTables provides hooks: http://datatables.net/development/sorting#data_source .

What I would suggest in this case is that you use aaSortingFixed and a hidden column. assorting fixed is effectively a pre-sort - so what you could do is have your hidden column being fixed sorted, and all established rows in the table have the same value in that hidden column (1 for example) - that way sorting will work as normal for established rows.

Then when you want to inject a row at the top of the table, you just need to use fnAddData with the value for that hidden column as 0. When that row becomes established update the value to 1 and it will merge with the rest of the table :-)

Allan

wheelermm

Thank you for the help. I apologize for being a little slow on the uptake with this one. I came up with another solution which seems like a lot more work than what you have proposed, but I will post it as it might help others understand how this all works - assuming I understand correctly :)

First light-bulb - when you specify something like this for a column - "sSortDataType": "custom", this will fire a $.fn.dataTableExt.afnSortData['custom'] = function ( oSettings, iColumn ) function, wherein you can return any data you want to sort on. So for my case, I can see if there is an input field for a new row and add a prefix to it, like "new:value", and if it is an anchor I will add the text of the anchor.

Second light-bulb - when you specify something like this for a column - "sType": "custom" two methods will be fired (one when a sort is ascending and one when it is descending) -
[code]
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(a, b)
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(a, b)
[/code]

These are fired for each comparison in the sort, so in my case, if I always want something to stay at the top, in the sort ascending function, if a starts with "new:", then I return -1, and in the descending function, if a is "new:" I return 1. That is not exactly how I do it, but that is the concept.

To use both in tandem I specify "aoColumns": [ {"sSortDataType": "custom", "sType": "custom"}, {"sType": "html"} ] - notice both in the first column.

When I add a new row, it will contain to make a new row easy to distinguish.
Let me post some bad code to illustrate:
[code]
var NEW_CONSTANT = "new:";

//so this method pushes data to sort on for a row
$.fn.dataTableExt.afnSortData['custom'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+ iColumn +')',oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
var newrow = $(this).find("div.newRow");
//if this is a new row push "new:value" so it can be distinguished in the sorting
if (newrow.length > 0) {
var input = $(this).find("input:first");
aData.push(NEW_CONSTANT + input.val());
} else {
//if it is an anchor, just push the anchor text
var anchor = $(this).find("a:first");
aData.push(anchor.text());
}

} );
return aData;
}

//and this code is NOT entirely perfect (probably just good enough to get you fired), but just keeping it //simple to give an idea

//this method sorts ascending on the data from $.fn.dataTableExt.afnSortData['custom'], 2 at a time
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(a, b) {
if (a.indexOf(NEW_CONSTANT) == 0) { a = "a"; }
if (b.indexOf(NEW_CONSTANT) == 0) { b = "a"; }
a = a.toLowerCase();
b = b.toLowerCase();

return (a < b) ? -1 : ((a > b) ? 1 : 0);
}

//this method sorts descending on the data from $.fn.dataTableExt.afnSortData['custom'], 2 at a time
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(a, b) {
if (a.indexOf(NEW_CONSTANT) == 0) { a = "zzzzz"; }
if (b.indexOf(NEW_CONSTANT) == 0) { b = "zzzzz"; }
a = a.toLowerCase();
b = b.toLowerCase();

return (a > b) ? -1 : ((a < b) ? 1 : 0);
}
[/code]

allan

Thanks for sharing your solution with us :-). There are several ways this could be done - your own solutions looks like quite a nice method to do it.

Allan