Question

I have an html table like this below:

name        number       contractid

sebastian      01             aea123
sab            02             aea534
jack           03             are152

My problem is when I click on the name the name column is sorting in alphabetical order and the position of rows is same its fine. But when I click on the column again the rows change their position, like below. (The first row will be moved to the empty space and second row is moved to first place.)

name        number       contractid
sebastian      01             aea123
sab            02             aea534
jack           03             are152

Is there any solution for reducing this change in position? Any CSS and Javascript properties I can do/set for preventing this kind of jumping?

Answer 1

Two options exist, either:

1. Remove the empty row altogether and style your Html so that the space that is getting lost is created using css. This will give you more desirable formatting along with cleaner html and you won’t rely on the html.
2. Insert the extra row as th rather than tr as in http://jsfiddle.net/6kczk/

I’d say option one is most sane if you can get a reasonable look, since if you have no borders all you need is some extra spacing.

Given a lack of specifics, I’m just using educated guesswork here. Whether option two would work depends on the sorting code and the assumptions made. If it assumes the first row is always the column header or gets confused when it finds extra rows of headers then it will be unlikely to work.