The rows of table are back to their places after refreshing page

Question

I was making a feature with which you can swap the rows in table. It works great, but after refreshing the page, if I swapped some rows, the rows are back to the place, where they have been before swapping. I'd like to know, why is that happening and how to avoid that. This is the code of the feature, if someone needs it:

swapRows = function(rowTable) {
    rowTable.find(".glyphicon-sort").click( function() {
        row = $(this).closest("tr");
        row.insertBefore( row.prev() );
    } );

} 

Answer 1

This is happening because after refreshing, your page returns to its initial state (from server, or cache), duh.

To retain the state, you have several options: AJAX (so that you don't have your page refreshed), or HTML5 history state manipulation, or local storage etc., all of which are beyond the scope of this question I'm afraid.