Inserting data to the top of the table

pedalshoe

I've implemented the dataTable calling the api to insert new rows. But as I was testing, i felt that it would be a better user experience if the new row was inserted at the top instead of the bottom of the list.

Is there a way to reverse the default of inserting a row at the bottom of the list?

If no way, can this be a feature request?

Thank you,
-Christopher

allan

Hi Christopher,

The ordering is DataTables is entirely done by the sorting. When you add the data to the table, DataTables will resort the whole table - so if it's ending up at the bottom, that's because that's where the sort is putting it. So to put it at the top, the sorting must be taken into consideration. Reversing the sorting perhaps with fnSort(), or fixing the sort with a hidden column using aaSortingFixed? There's quite a few ways to do it - which one is best - is up to you :-)

Regards,
Allan

pedalshoe

Ah man,
this is a good idea! and here is what I did

table initialization:
[code]
oTable = $('#quickbuild').dataTable({
"sPaginationType": "full_numbers",
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaSortingFixed": [[0,'desc']],
"aoColumns": [
{"bSortable":false},
{"bSortable":true,"bVisible": false},
{"bSortable":false},
{"bSortable":false},
{"bSortable":false}
]
});
[/code]

from my addRow() javascript function:
[code]
oTable.fnAddData( [
input_element,
next_id, // field that will be sorted ; calculated by counting the number of rows already in the table
document.getElementById("primary_name").value,
document.getElementById("secondary_name").value,
document.getElementById("phone").value ] );
[/code]

the above is working. I think i have to calculate the number of rows already for this to work the way i need it.
can you review what i posted here?

Lastly, can you explain iDataSort?

Thanks alot,
-Christopher

allan

Hi Christopher,

Yup - your code looks good to me :-) (as long as next_id is incremented) - although one little thing, do you want the fixed sorting to be on column index 0? Should it not be 1 - where the next_id is?

iDataSort: This is a good one, and can brain bend a little... Basically what it allows you do is sort a specific column (say index 2) based on the data not in itself, but in a different column (say index 4 for example). This might be useful if you had some really complex data in a column (2) but sorting it was actually quite simple. So you could put the complex data into index 2, and the easy sorting data into index 4 (a date is a common example, string v unix time). Then hide the easy sorting column, and you've got sorting working on index 2 as intended, all nice and easy :-)

Regards,
Allan

pedalshoe

I understand the iDataSort now. Thanks.

Thanks for looking at the code... next_id is being incremented... next_id is in column 1...
As for the error (as it seems) for aaSortingFixed.. in the "working" code the index is still set to 0 (my hidden field WAS at 0, but i forgot to change aaSortingFixed parameter to reflect my column change). According to documentation it SHOULD be the column with data I want to use to sort on; 1 in my case.. but i forgot to make this change in my code (you caught that), but the descending sort is still working with the index set to 0. my 0th coulmn contains a checkbox with a dynamically calculated id. Which is constructed as:
[code]
var checkbox_id="calllist"+next_id;
var input_element = "";
[/code]
so the input id will be calllist1, calllist2, ..., calllistN
could it be that the id for input field is being evaluated? Is there anything else being used to evaluate the sort direction?

When I corrected the index to use column 1 (where next_id is), it still works as expected.

-Christopher

allan

Yes indeed, it is quite likely that the HTML of the input element is being used for the sort - unless you have taken steps to prevent this. If you set the sType ( http://datatables.net/usage/columns#sType ) for the column to 'html' then DataTables will strip the HTML and just sort on whatever remains. This might be good enough for you though, if there is no other data in the column, as which point you either need to use a custom sorting plug-in to sort on something in the text that you want to pick out, or use that DataTables sorting API to sort on the live DOM information (so you can take into account the current value of the checkbox, rather than just the text string): http://datatables.net/examples/plug-ins/dom_sort.html

Phew - so many options :-)

Regards,
Allan

pedalshoe

Thanks Allan,

Your input and advice REALLY helped. I see that there are alot of ways of doing this. The first suggestion was understandable and lends itself more naturally to what I'm doing. I just noticed that my method for generating the next_id was wrong and didn't consider the rows that weren't shown via pagination. I'm using fnGetData() now and incrementing by one.

I added the sType to ensure that 'm sorting numerically and not by ascii or alphanumericly. My new table initialization is:
[code]
oTable = $('#quickbuild').dataTable({
"sPaginationType": "full_numbers",
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaSortingFixed": [[1,'desc']],
"aoColumns": [
{"bSortable":false},
{"bSortable":true,"sType":"numeric","bVisible": false},
{"bSortable":false},
{"bSortable":false},
{"bSortable":false}
]
});
[/code]

I'm getting there Allan, just have to persist the information now.
Thanks for all your help on this.

-Christopher