Link to home
Start Free TrialLog in
Avatar of eaweb
eawebFlag for undefined

asked on

sorting arrow display

Hi,

I am using the table sorting code form this site "http://www.allmyscripts.com/Table_Sort/index.html#features".
Please see attachment gs-sortable.txt. for the code.
Its working fine, but i am having an issue with the display of my sorting indicator arrows.
When i sort the first time on the column AA i get my asc arrow. Fine, but when clicking on column BB to sort, the arrow image of column BB displays but the arrow image of column AA keeps displaying.
Please see attachment pic1.jpg
What i want is that, when i click on for example column BB to sort i don't want the arrow of my last sorting for example on column AA to keep displaying.
Please see attachment pic2.jpg

What code change must i do in the attachment "gs-sortable" in order to make only the selected column sorting arrow to display?

Please some code help. Thanks  

gs-sortable.txt
pic1.JPG
pic2.JPG
Avatar of SordSord
SordSord
Flag of United States of America image

I think you want to change the code at line 297:

            obj.innerHTML = (icon.match(/</))? icon:
                  '<font color="' + TSort_Store.sort_colors[i] + '">' + icon + '</font>';

so that it only is processed if i equals 0

   if (i == 0) {
            obj.innerHTML = (icon.match(/</))? icon:
                  '<font color="' + TSort_Store.sort_colors[i] + '">' + icon + '</font>';
  }
Avatar of eaweb

ASKER

no, the arrow of column AA keep diplaying after sorting on column BB
Try adding an else case to clear the innerHTML value.

if (i == 0) {
  obj.innerHTML = (icon.match(/</))? icon:
                  '<font color="' + TSort_Store.sort_colors[i] + '">' + icon + '</font>';
} else {
  obj.innerHTML = '';
}

Open in new window

Avatar of eaweb

ASKER

Yes the arrow disappear, but another issue has come forward if I change the code as you say.
The issue is this:
if i click on column AA the first time to sort asc and then i want to sort asc on lets say on column BB the arrow disappear, but if I click 3 times on column BB asc, desc and the 3rd time to return to the original state, instead of going to the original state it goes to the asc state on column AA.

Is there a way to go to the original state after clicking the 3rd time on a column and not to the state of a previous column click?
Sure, insert the following line at line 232:

if (sort_keys.length > 1) sort_keys.length = 1;

(shown below in context)

This will keep resetting the array of sort keys back to length 1, so when you remove the current sort key, there won't be another to fall back to. Note that this will also change the behavior a bit as it will no longer be possible to sort on multiple columns.
      obj = document.getElementById ('TS_' + id + '_' + table_id);
      if	(obj != null)	obj.innerHTML = '';
    }
  }
 
if (sort_keys.length > 1) sort_keys.length = 1;
  var len = sort_keys.length;
  //	This will either remove the column completely from the sort_keys
  //	array (i = 0) or remove duplicate column number if present (i = 1).

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of SordSord
SordSord
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of eaweb

ASKER

your good in javascript buddy.

i have posted another javascript question. can you help me with it? see link. i can't figure it out how to do it
https://www.experts-exchange.com/questions/24575360/read-in-cookie-and-transform-it.html
Avatar of eaweb

ASKER

great
Avatar of eaweb

ASKER

the solution of:

if (sort_keys.length > 1) sort_keys.length = 1;

did not work it keep display all the sorting arrows.