1

I am using TableSorter.js for table sorting, and also using Janko's Expandable jQuery Table Rows . I am using a regular HTML table and . The issue is that for the last couple of rows, the 'even' row is showing up as 'odd'...

Here's an example (don't mind the redacted blanks - they just cover labels): EDIT: the text in pic should say "this row should be ODD, but it is not"

enter image description here

As you can see, the "additional" information is considered as an "tr.odd" (css makes odd background color Green), and the last row, shows up as "tr.even". This messes up the clicking to expand. I'll post my code below. I think it's the apex:repeat that's causing issues.

SCRIPTS

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


    <!-- testing below: draggable table -->
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/jquery.dragtable.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/dragtable.css')}"/>  

    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.css')}"/> 
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.green.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.css')}"/> 

<script type="text/javascript">  
    j$ = jQuery.noConflict();
    j$(document).ready(function () {

j$("#mytable tr:odd").addClass("odd");
        j$("#mytable tr:not(.odd)").hide();
        j$("#mytable tr:first-child").show();

        j$("#mytable tr.odd").click(function(){  
        j$(this).next("tr").toggle();
        j$(this).find("arrow").toggleClass("up");
        });

sortTable();
});
function sortTable(){
        j$("[id$=mytable]").tablesorter();
    }
</script>  

CODE

<apex: pageblocksection>
  <apex:outputpanel>

<table id=mytable class=tablesorter">
 <thead>
   <tr>
     <th>My headers</th>
   </tr>
</thead>
<apex repeat value="{!value}" var="c">

 <tbody>
    <!--My 'Odd' Rows - click these to expand -->
    <tr>
     <td> {!c.someValue} </td>
    </tr>

   <!-- My 'Even' Rows - these expand when Odds are clicked -->
    <tr>
       <td>
            <ul>
                  <li> line 1 </li>
                  <li> <!c.someOtherValue </li>
            </ul>
       </td>
    </tr>

  </tbody>
</apex:repeat>
</table>
</outputpanel>

Any thoughts here?

  • Is this a typo or is there really text inside the element like this? <td My 'Even' Rows - these expand when Odds are clicked> – Mark Pond Oct 5 '15 at 20:45
  • well, pretty much all the text has to be redacted, and I have something like 22 columns, with lots of <apex:params> and such, so I just wanted to give a good barebones idea of what the code is, without being... overwhelming. – RC82 Oct 5 '15 at 21:08
  • ok, and how about the <tbody> tag being inside the repeater element? The table will generally only have a single tbody section. Is it written in that structure in your unredacted markup? – Mark Pond Oct 5 '15 at 23:10
  • Yeah, it's exactly like that. I've tried placing the apex:repeat in a few different places but it wouldn't change the behaviour. If I didn't need draggable columns/expandable rows/other jquery features, I'd just use <apex:table> and be done with it. Any thoughts on what I can do? – RC82 Oct 6 '15 at 1:26
1

I think the issue is with <tbody> inside <apex:repeat> tag. I tried your code with Account object with some modification and it is working fine. I have commented the dragtable part with this code. Hope this helps.

You can run this as below. 001i000000gDY4a is a Account id.

https://<salesforce url>/apex/tablesort?id=001i000000gDY4a

Standalone VF page

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.green.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.default.css')}"/>     

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

    <!-- testing below: draggable table -->
    <!-- <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/jquery.dragtable.js')}"/> -->
    <!-- <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/dragtable.css')}"/> --> 

    <table id="mytable" class="tablesorter tablesorter-default">
        <tr>
            <th>Case Number</th><th>Origin</th>
            <th>Creator Email</th><th>Status</th>
        </tr>
        <apex:variable value="{!1}" var="rowNum"/>
        <apex:repeat var="cases" value="{!Account.Cases}">
        <tr>
            <td>{!FLOOR(rowNum)}</td>
            <td>{!cases.CaseNumber}</td>
            <td>{!cases.Origin}</td>
            <td>{!cases.Contact.email}</td>
            <td>{!cases.Status}</td>
        </tr>
        <apex:variable var="rowNum" value="{!rowNum + 1}"/>
        </apex:repeat> 
    </table>    
    <script type="text/javascript">
        j$ = jQuery.noConflict();
        j$(document).ready(function () {
            j$("#mytable tr:odd").addClass("odd");
            j$("#mytable tr:not(.odd)").hide();
            j$("#mytable tr:first-child").show();
            j$("#mytable tr.odd").click(function(){  
                j$(this).next("tr").toggle();
                j$(this).find("arrow").toggleClass("up");
            });
            sortTable();
        });
        function sortTable(){
            j$("[id$=mytable]").tablesorter();
        }    
    </script>
</apex:page>

Collapsed enter image description here Expanded enter image description here

|improve this answer|||||
  • Saroj, thank you for helping. I've tried this, but I still have the same issue (and my jquery seems to break taking out the tbody and thead). What is different with mine, is that I have three sets of TR tags - my Headers, my even rows and odd rows. The even and odd rows look different from each other. Any thoughts? (edited code for clarity, above) – RC82 Oct 6 '15 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.