Sorting stops working once table is changed

[ahmadtawakol]

I have a table that I add data and remove data from it using JS. Sorting the table works perfectly once the page loads and the table is initialized. However, once anything in the table changes, sorting stops working.

There is no way to reinitialize the table again once the data changes.

[ckcollab]

+1

[ckcollab]

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

[BlaM]

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.

[ahmadtawakol]

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.

[ckcollab]

Woo! Thanks so much!

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

[ahmadtawakol]

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" notifications@github.com 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.

[ckcollab]

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

[ahmadtawakol]

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" notifications@github.com 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.

[ckcollab]

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!

[paulewetzel]

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;
}