FAQ
I have an x:dataTable which presents a row of results from a database each
with a checkbox. If I sort on a column in the database after selecting a
checkbox the checkbox does not also sort relative to the sorted column. For
example, if I check the first checkbox and then sort the column descending
the first checkbox is still checked, not the last. I guess I need to link
the checkbox with the row somehow but I'm not sure how. Any suggestions,
tips would be appreciated.

Thanks,
-Mark

Search Discussions

  • Slawek at Jun 1, 2005 at 3:54 pm
    check what is executed first: sort method or checkbox setters...

    btw: im using my_own_client_side_java_script_sort_stuff. on p4 2.8GHz it
    sorts and rerenders 10x100 table in 1 second. if someone would like to
    save server power and use client power to perferm sorting on "not big"
    tables i can share my script (not elegant but works;)

    slawek
    I have an x:dataTable which presents a row of results from a database
    each
    with a checkbox. If I sort on a column in the database after selecting a
    checkbox the checkbox does not also sort relative to the sorted column.
    For
    example, if I check the first checkbox and then sort the column
    descending
    the first checkbox is still checked, not the last. I guess I need to
    link
    the checkbox with the row somehow but I'm not sure how. Any
    suggestions,
    tips would be appreciated.

    Thanks,
    -Mark
  • Alex at Jun 1, 2005 at 4:28 pm

    Slawek wrote:

    check what is executed first: sort method or checkbox setters...

    btw: im using my_own_client_side_java_script_sort_stuff. on p4 2.8GHz
    it sorts and rerenders 10x100 table in 1 second. if someone would like
    to save server power and use client power to perferm sorting on "not
    big" tables i can share my script (not elegant but works;)

    slawek

    Hi Slawek,

    I would like to see your script. It may come in handy for my project.

    Thanks and best regards
    Alex
  • Mfaine at Jun 1, 2005 at 5:01 pm

    On Wed, 01 Jun 2005 17:53:49 +0200, Slawek wrote :

    check what is executed first: sort method or checkbox setters...

    btw: im using my_own_client_side_java_script_sort_stuff. on p4 2.8GHz it
    sorts and rerenders 10x100 table in 1 second. if someone would like to
    save server power and use client power to perferm sorting on "not big"
    tables i can share my script (not elegant but works;)

    slawek
    I have an x:dataTable which presents a row of results from a database
    each
    with a checkbox. If I sort on a column in the database after selecting a
    checkbox the checkbox does not also sort relative to the sorted column.
    For
    example, if I check the first checkbox and then sort the column
    descending
    the first checkbox is still checked, not the last. I guess I need to
    link
    the checkbox with the row somehow but I'm not sure how. Any
    suggestions,
    tips would be appreciated.

    Thanks,
    -Mark

    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
  • Slawek at Jun 1, 2005 at 7:54 pm
    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
  • Sean Schofield at Jun 2, 2005 at 10:22 am
    Mark,

    I assume you have looked at the simple examples and saw the sortable
    table examples there. None of them have checkboxes but they will help
    you to set up a simple sortable table (that's probably not your issue
    though.)

    Most likely you are experiencing a known issue:
    http://issues.apache.org/jira/browse/MYFACES-228

    We are currently working on a solution to it. It may be a couple of
    weeks until we get a patch. So far I have been one of the main people
    looking at the issue and I'm leaving the country next week for two
    weeks.

    sean

    On 6/1/05, Slawek wrote:
    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

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupusers @
categoriesmyfaces
postedJun 1, '05 at 2:10p
activeJun 2, '05 at 10:22a
posts6
users4
websitemyfaces.apache.org

People

Translate

site design / logo © 2019 Grokbase