+ Start a Discussion
Scotty ForceScotty Force 

Visualforce page table question?

Want to build a visualforce page which shows table with few records in it. Testing it out in developer org, so no preference which object i use. One of the column should display numbers. Want to see if it's possible to sort those records based on that column. Can you please help me, by giving a small example. Thanks!!

 
Best Answer chosen by Scotty Force
Alain CabonAlain Cabon
Hi,

There are two cases: server (apex controller) or client side (javascript).

1) You have all the values on the table on the screen (client side) : javascript or datatable 

DATATABLES IN VISUALFORCE, PART 1
https://www.verticalcoder.com/2014/11/21/datatables-in-visualforce-part-1/

Sorting Visualforce Tables with JavaScript​:
http://bobbuzzard.blogspot.fr/2014/09/sorting-visualforce-tables-with.html

2) You don't have all the values on the table on the screen so you need to change the order of the SOQL request in the controller (server side): column facet + dynamic SOQL

A Recipe For Column Sorting - Salesforce Visualforce Page
by Terry Luschen 
https://www.sundoginteractive.com/blog/a-recipe-for-column-sorting-salesforce-visualforce-page

Dynamic SOQL (just one line in the blog above)
public boolean Column1Sort{get;set;} 
public boolean Column2Sort{get;set;}
public boolean SortAscending{get;set;} 
public boolean SortDescending{get;set;} 
public string orderBy{get;set;} 
private pageReference sortByValue(string value){ 
    SortAscending = false; SortDescending = false; 
    if(orderBy == value){ 
        if(orderByAscDesc == 'Asc'){  orderByAscDesc = 'Desc'; SortDescending = true; }
        else{ orderByAscDesc = 'Asc'; SortAscending = true; }
    }else{ 
         orderByAscDesc = 'Asc'; SortAscending = true; } 
    orderBy = value; 
    doQuery(); 
//Routine that does your query that loads your table. It should use the orderBy string for the 'order by' clause 
    return null; 
} 
public pageReference sortByColumn1(){ Column1Sort = true; Column2Sort = false; return sortByValue('Column1'); } 
public pageReference sortByColumn2(){ Column1Sort = false; Column2Sort = true; return sortByValue('Column2'); }

All Answers

Alain CabonAlain Cabon
Hi,

There are two cases: server (apex controller) or client side (javascript).

1) You have all the values on the table on the screen (client side) : javascript or datatable 

DATATABLES IN VISUALFORCE, PART 1
https://www.verticalcoder.com/2014/11/21/datatables-in-visualforce-part-1/

Sorting Visualforce Tables with JavaScript​:
http://bobbuzzard.blogspot.fr/2014/09/sorting-visualforce-tables-with.html

2) You don't have all the values on the table on the screen so you need to change the order of the SOQL request in the controller (server side): column facet + dynamic SOQL

A Recipe For Column Sorting - Salesforce Visualforce Page
by Terry Luschen 
https://www.sundoginteractive.com/blog/a-recipe-for-column-sorting-salesforce-visualforce-page

Dynamic SOQL (just one line in the blog above)
public boolean Column1Sort{get;set;} 
public boolean Column2Sort{get;set;}
public boolean SortAscending{get;set;} 
public boolean SortDescending{get;set;} 
public string orderBy{get;set;} 
private pageReference sortByValue(string value){ 
    SortAscending = false; SortDescending = false; 
    if(orderBy == value){ 
        if(orderByAscDesc == 'Asc'){  orderByAscDesc = 'Desc'; SortDescending = true; }
        else{ orderByAscDesc = 'Asc'; SortAscending = true; }
    }else{ 
         orderByAscDesc = 'Asc'; SortAscending = true; } 
    orderBy = value; 
    doQuery(); 
//Routine that does your query that loads your table. It should use the orderBy string for the 'order by' clause 
    return null; 
} 
public pageReference sortByColumn1(){ Column1Sort = true; Column2Sort = false; return sortByValue('Column1'); } 
public pageReference sortByColumn2(){ Column1Sort = false; Column2Sort = true; return sortByValue('Column2'); }
This was selected as the best answer
Alain CabonAlain Cabon
 You have all the values of the table on the screen (client side) : javascript or datatable (jQuery is also javascript by the way)