Sorting stops working once table is changed about sortable HOT 10 OPEN

I managed to find a workaround after posting the issue, I just forgot to post the solution.

Before doing any changes to the table, you can "un-initialize" the table first using this line of code here:
document.getElementById("InsertYourTableIDHere").setAttribute("data-sortable-initialized", "false");

Or in jQuery it would be: $("#InsertYourTableIDHere").attr("data-sortable-initialized", "false");

After you are done changing the table, just run Sortable.init(); again.

from sortable.

+1

from sortable.

I've been going over https://github.com/HubSpot/sortable/blob/master/js/sortable.js and it doesn't seem like it exposes any methods to re-initialize, but it should be possible to re-init and things should "just work?"

I'm using RiotJS and I believe on re-draw it destroys the components

from sortable.

I haven't tried to add rows to the table "manually", but in combination with vue.js sorting seems to work even when the table is modified after init. It just does not trigger an automatic resort when new items are added - the user has to click on a header to trigger a resort. It would be nice to have an option to trigger this automatically. So far all sorting seems to be encapsulated in the "onClick" handler - so there is no obvious way to trigger this in code.

from sortable.

Woo! Thanks so much!

It does suck that the sorting doesn't re-sort the proper column, hrmmm

from sortable.

You can easily keep track of which column was last sorted using the column's ID or data attribute, and then programmatically sort the table after changing it.

On Wed, Mar 9, 2016 at 9:34 AM -0800, "Eric Carmichael" [email protected] wrote:

Woo! Thanks so much!

It does suck that the sorting doesn't re-sort the proper column, hrmmm

—
Reply to this email directly or view it on GitHub.

from sortable.

Hrm, trying to do something similar by manually firing the click-to-sort event:

sorted_column.dispatchEvent(new Event('onclick'));
sorted_column.dispatchEvent(new Event('onclick'));

Doesn't seem to actually work? Also, it seems like Sortable isn't sorting some columns properly, may have to specify a type somewhere? EDIT Actually maybe it is working, just some columns aren't sorting properly in the first place?

4146.57 should be the first row when sorted ascending

from sortable.

As far as I remember, to sort the table programmatically, all you do is give the column you want to sort a certain data attribute. Try sorting a table manually and then use inspector to see what attribute the column was given, then do the same using JavaScript or jQuery.

On Wed, Mar 9, 2016 at 9:46 AM -0800, "Eric Carmichael" [email protected] wrote:

Hrm, trying to do something similar by manually firing the click-to-sort event:

sorted_column.dispatchEvent(new Event('onclick'));
sorted_column.dispatchEvent(new Event('onclick'));

Doesn't seem to actually work? Also, it seems like Sortable isn't sorting some columns properly, may have to specify a type somewhere?

4146.57 should be the first row when sorted ascending

—
Reply to this email directly or view it on GitHub.

from sortable.

Cool, added data-sortable-type="numeric" to my <th> and it's all working now, you're the best thanks so much for your time!

from sortable.

Yeah, I am having the same issue when I add new rows to the table. Seems like the table could go through a re-initialization process, unhooking any events and clearing the value in _results, then initializing the table again, instead of calling
if (table.getAttribute('data-sortable-initialized') === 'true') {
return;
}

from sortable.