ok, but plese by lenient;)
thats my old stuff (while w was jaunty php developer who was jus learning
OOP) that after somme copy-paste;) work started working im my jsf app.
1. JS code is procedural cause i hate that ridiculous quasi-object js oop
2. somme idenifiers are named in polish language, bu i have commented them
in english
so...
first we need somme global variables:
var collumnToSort=0; //number of collumnt that will be sorted. we will
need them cause that cant be passed to comparator (explained later)
var sortMode=1;// 1-means that we will sort strings, 2-means that we will
sort numbers (int or float)
var directions=new Array();// array o sort orders per each collumn (i
assume that there will be 11 collumns-change array dimenson to fit your
heeds) 1-means desc sort, -1 - means inc sort
directions[0]=1;directions[1]=1;directions[2]=1;directions[3]=1;directions[4]=1;directions[5]=1;
directions[6]=1;directions[7]=1;directions[8]=1;directions[9]=1;directions[10]=1;
there is posibilty that our table data could be links to details or sth or
could be surronded in span tag.
so to compare data from each cell of table we must get rid of <a> or
<span> tag, those 2 functions do it:
function takeCareAboutSpan(elem){
res=elem.match(/<span.*>(.*)<\/span>/i);
if (res==null)//nie znaleziono znacnzika span
return elem; //zwrocenie elementu
else
return res[1];
}
function takeCareAboutAHref(elem){
res=elem.match(/<a.*>(.*)<\/a>/i);
if (res==null)//nie znaleziono znacnzika span
return elem; //zwrocenie elementu
else
return res[1];
}
u give them the innerHTML of table cell and they give u pure data, without
garbage;)
in poland we use , insted of . to write float numbers so i have hunction
that change polish notation to "normal world" notation;) ...maybe can be
helpfull for someone
function removeComas(s){
return s.replace(',' , '');
}
what we need are two comparing finctions, one to inc sort and secont to
desc sort. they takes 2 parameters to compare and return -1 when order is
wrong, 1 when is ok, 0 when paramters are the same (whatever same means in
js - i cant remeber;)
//desc sort
function sortujMalejaco(a,b){
slowo1=takeCareAboutAHref(takeCareAboutSpan(a[collumnToSort]));
slowo2=takeCareAboutAHref(takeCareAboutSpan(b[collumnToSort]));
if (sortMode==2){//numbers sort mode
slowo1=parseFloat(removeComas(slowo1));
slowo2=parseFloat(removeComas(slowo2));
}
else{//string sort mode
slowo1=slowo1.toLowerCase();
slowo2=slowo2.toLowerCase();
}
if (slowo1>slowo2){
return -1;
}
else{
if (slowo1<slowo2)
return 1;
else
return 0;
}
}
//inc sort
function sortujRosnaco(a,b){
slowo1=takeCareAboutAHref(takeCareAboutSpan(a[collumnToSort]));
slowo2=takeCareAboutAHref(takeCareAboutSpan(b[collumnToSort]));
if (sortMode==2){//sortowanie liczb
slowo1=parseFloat(removeComas(slowo1));
slowo2=parseFloat(removeComas(slowo2));
}
else{
slowo1=slowo1.toLowerCase();
slowo2=slowo2.toLowerCase();
}
if (slowo1<slowo2){
return -1;
}
else{
if (slowo1>slowo2)
return 1;
else
return 0;
}
}
and the most importand function... sorting monster. the idea is to copy
data from table (DOM stuff) to my own model (matrix), sort that model, and
than copy data from model to table.
a i remember sorting rows of table was impossible so i had to sort somme
separated variable.
/*
idTable-id of table tag (remember about jsf colons;)
col-which columf of that table u want to sort
mode-1sort as strings, 2sort as numbers
lastRows-how many rows (counting from the end) have to be ommited while
sorting (for example footer of the table)
btw: funtion omits first row from the begining (header)
*/
function sortTable(idTable, col, mode, lastRows){
collumnToSort=col;//get global variables cause comparators must get
values from them-cant pass paramters to comparators cause they are called
as function references
sortMode=mode;
table=document.getElementById(idTable);
if (!table)
return false;
wiersze=table.rows;//all rows of table
dane = new Array();//my own data model (that will be matrix)
for (i=1; i<wiersze.length-lastRows; i++){//copy data from table to model
omiting first (zero) row and few last rows
dane[i-1]=new Array();
for (j=0; j<wiersze[i].cells.length; j++){ //copy each cell of row
dane[i-1][j]=wiersze[i].cells[j].innerHTML;//!!! notice that we are
copying innerHTML so everithing what is inside <td> will be copied (ex:
links, spans and so on)
}
}
//==========sort==========
if(directions[col]==1)
dane.sort(sortujMalejaco); //pass reference to comparator function
else
dane.sort(sortujRosnaco);
directions[col]*=(-1);//reverse direction of sorting
//copy data from model to table
for (i=1; i<wiersze.length-lastRows; i++){//przepsianie sortowanych
danych do htmla
for (j=0; j<wiersze[i].cells.length; j++){
wiersze[i].cells[j].innerHTML=dane[i-1][j];
}
}
return false;//to eventually stop submit event to propagate when clickin
on jsf component (ex command button) - page wont be sent on server
}
how to use that?
simply:
<h:column>
<f:facet name="header">
<h:commandLink value="#{msg.TABLE_PRODUCT_NAME}" onclick="return
sortTable('f:data', 0, 1,1)" />
</f:facet>
.
.
.
so thats all
i may look like shit but works fine;)
im using it to sort curenty dispalyed data
im also using server side sorter (order by in hibernate) to global sort
all data from database-but it doesnt matter
notice that after reload page u loose your JS sorting!
actually i have my global JS variables saved in hidden fileds so i can
restore sorting by <body onload>
cheers
slawek
The checkbox setters would get executed first because they have
onchange="submit()" attribute. I've also noticed that the checkboxes do
not
stay checked when paging with a dataScroller, this may be related, though
I'm not quite sure how, just feels like it. I'm thinking that the
arrayList
that backs the dataTable is not being saved before paging and/or
sorting? I
though this was inherit in the component?
Any clarifications on any of this would be appreciated.
Also, I would be interested in seeing your sort script.
Thanks,
-Mark
