0

I have a table that has tablesorter on it. It works great. When I re-render the pageblock section that it is in, the table is then reloaded WITHOUT tableSorter. Something's up with my rerender. Can someone point me in the right direction?

TableSorter Code:

<script type="text/javascript">
function loadTablesort(){
$j = jQuery.noConflict();    
$j(document).ready(function () {
    $j("[id$=searchResults]").tablesorter({theme: 'green', headers: {0: {sorter: false},  17: {sorter: false},  20: {sorter: false} } });
         });
    }
loadTablesort();
</script>  

Here is my command button in the pageblock section.

  <apex:pageblocksection title="List"  rendered="{!var.size >0 }" 
id="propTable" columns ="1" >

    <apex:commandButton action="{!search}" value="Refresh"
 rerender="propTable, searchresults" oncomplete="loadTablesort();"/>

    <apex:outputPanel rendered="{!var.size >0}" id='propertyList'>

    <apex:pageblocktable value="{!wrapperList}" id="searchResults" var="c"
 border="1" styleclass="tablesorter">

<Table code...>

EDIT: javanoob - I've tried following your instructions, but TableSorter doesn't load when the page is loaded at all now. What am I doing wrong?

    <script type="text/javascript">


$j(document).ready(function () {
    loadtable();
    uncheckParentCheckBox();

    }


function loadtable(){
    $j("[id$=searchResults]").tablesorter({theme: 'green', headers: {0: {sorter: false},  17: {sorter: false},  20: {sorter: false} } });
    $j("[id$=searchResultsclient]").tablesorter({theme: 'green', headers: {0: {sorter: false},  17: {sorter: false},  20: {sorter: false} } });
    $j("[id$=consultantListPM]").tablesorter({theme: 'green'  });
    $j("[id$=consultantListPP]").tablesorter({theme: 'green'   });
    $j("[id$=clientResultListTable]").tablesorter({theme: 'green'   });

    }

</script> 
  • I would factor out a function to be called from both the ready and the oncomplete as I doubt the ready will fire for the partial page update. – Keith C Aug 12 '15 at 18:35
  • Hey Keith - thanks for the response. What do you mean by 'the ready'? – RC82 Aug 12 '15 at 18:45
0

Try this..it will work:

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

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

and from the command button oncomplete method make the call to sort table function

<apex:commandButton name="fetchResults" action="{!updateAvailableList}" reRender="searchResults" status="searchStatus" oncomplete="sortTable(); return false;"/>
  • Thanks Javanoob... I tried this, but now the TableSort doesn't load on pageload. What am I doing wrong here? (See my edit for code) – RC82 Aug 12 '15 at 19:59
  • j$ = jQuery.noConflict(); Do you have this in your code? otherwise it does not know what is j$. – javanoob Aug 12 '15 at 20:03
  • see my updated code..I used the same code for my custom product selection page and it is working fine. – javanoob Aug 12 '15 at 20:06
  • Perfect - thank you! That's what was missing. I'm going to start doing some javascript codeAcademy classes to get me up to speed. (or should I do Jquery?). Thanks!! – RC82 Aug 12 '15 at 20:18
  • @RC82 I am also like you :) Don't have much JS expertise. I think Javascript basics are enough. – javanoob Aug 12 '15 at 20:22

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.