function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
VKrishVKrish 

jQuery Table Sorter not working with VF after few sorting

Hi all,

 

I am using jQuery Table Sorter with Apex to display set of 200 records in VF page.

My code resembles like the code described in the blog:

http://salesforcegirl.blogspot.com/2011/03/jquery-table-sorter-meets-salesforce.html

 

Everything is working as expected when I sort the data few times (2-3).

But if I test sorting more than few times (say 7-8 times), some of the data is lost. Is it something to do with table repeat?

Is there any limitation while using table repeat?

How ever the sorting is working no matter how many times I try to sort. Bur after some number of times sorting, some of the data is lost in VF page.

 

<script language="javascript" type="text/javascript">
      $(document).ready(function(){
            $("table").tablesorter({
                  headers: {
                     0: {sorter: 'text'},
                     1: {sorter: 'text'},
                     2: {sorter: 'text'},
                     3: {sorter: 'text'},
                     4: {sorter: 'text'},
                     5: {sorter: 'text'}
             }
      });
</script>
<table id="theTable" class="list tablesorter" cellspacing="1">
      <thead class="rich-table-thead">
           <tr class="headerRow">
                 <th colspan="1" scope="col">Level Of Interest</th>
                 <th colspan="1" scope="col">Re-Confirmed</th>
                 <th colspan="1" scope="col">Name</th>
                 <th colspan="1" scope="col">Type</th>
                 <th colspan="1" scope="col">Symbol</th>
                 <th colspan="1" scope="col">Group</th>
            </tr>
       </thead>
       <tbody>
           <apex:repeat value="{!Interest}" var="fi" id="subRepator">
               <tr class="dataRow {!fi.Type_Trimmed}">
                    <td>
                        <apex:selectList id="slIntrest" value="{!fi.Level_Of_Interest}" size="1">
                              <apex:selectOptions value="{!IntLevelOptions}"/>
                        </apex:selectList>
                        <apex:outputLabel value="{!fi.Level_Of_Interest}" style="visibility:hidden;"  />
                    </td>
                    <td> <apex:inputCheckbox value="{!fi.Confirmed}" rendered="{!fi.ReConfirmedCheckBoxRendered }"/></td>
                    <td><apex:outputLink value="/{!fi.InterestId}" title="{!fi.Name}" target="_blank">{!fi.Name}</apex:outputLink></td>
                    <td><apex:outputLabel value="{!fi.Type}"/></td>
                    <td><apex:outputLabel value="{!fi.Symbol}" /></td>
                    <td><apex:outputLabel value="{!fi.Group}" /></td>
                </tr>
           </apex:repeat>
     </tbody>
</table>

 

Please let help!

Thanks in advance

Best Answer chosen by Admin (Salesforce Developers) 
VKrishVKrish

Finally found the issue. It has nothing to do with Apex or VF.

It is browser compatibility issue. jQuery table sorter plug in is not compatible with IE 9 in normal mode.

Same thing works well with IE 9 compatible mode, IE 8, FF, Chrome, etc.

So I made JS browser version check in button click before loading this page & make the sorting functionality disable for user using IE 9 in normal mode alone.

All Answers

Starz26Starz26
Doesn't apex:repeat output into a table? If so your selector is selecting both the main table as well as the repeat table. You may want to review the HTML output and then only select the I'd of the table to sort.... Just thinking out loud without actually testing.
VKrishVKrish

Thanks for the reply!

I think apex:repeat does not output into a table. Please chk this sample code.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_repeat.htm

I have also used apex:repeat for the set of data & not header.

Also I tried giving the table id with different apex:repeat id in jQuery caller. It doesnt work.

 

Any ideas?

 
VKrishVKrish

Finally found the issue. It has nothing to do with Apex or VF.

It is browser compatibility issue. jQuery table sorter plug in is not compatible with IE 9 in normal mode.

Same thing works well with IE 9 compatible mode, IE 8, FF, Chrome, etc.

So I made JS browser version check in button click before loading this page & make the sorting functionality disable for user using IE 9 in normal mode alone.

This was selected as the best answer
SFDC_EvolveSFDC_Evolve

Hi Vkrish,

 

I am new to the Jquery . I am trying to do the same thing  with the below . . but for the CSS is not coming up . . . I am able to do the sorting but .icon.  . color nothing is coming up

 

 

<apex:page standardController="Account">

<apex:includeScript value="{!URLFOR($Resource.TableSorter, 'jquery-latest.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.TableSorter, 'jquery.tablesorter.js')}"/>

<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);

</script>

<apex:pageBlock title="My Content">

<table id="myTable" class="tablesorter" cellspacing="1">
<thead class="rich-table-thead">
<tr>
<th colspan="1" scope="col">Name</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!account.Contacts}" var="item">
<tr>
<td><apex:outputLabel value="{!item.name}"/></td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:pageBlock>
</apex:page>

 
VKrishVKrish

Do you mean Table Header color? If so, I have same issue

When the table sorter is enabled, the color doesnt show up.

When the table sorter is disabled, thent he color shows up.

Since it wasnt that big of a issue, I never payed detail attension to it.