2

I found the javaScript jQueryDataTables for pagination and sorting. I add the code and the javaScript to my org and visualforce page. If I open the page for the first time, the script works fine, but If I rerender the pageblock the function from the jQueryDataTables disappear.

I read something about the actionFunction, but I don't know how can I use this in my code.

Could you help me with this issue, please.

<apex:pageblock title="Accounts ({!TotalRecs})" id="pbAcc" rendered="{!IF(AccList2.size != NULL,true,false)}">
    <apex:pageblocktable value="{!AccList2}" var="Acc">        
        <apex:column headervalue="LINK" style="background-color:{!IF(Acc.Id=SelectedAccountId,"#7394ce","")}">
            <apex:outputLink target="_blank" value="/{!Acc.Id}">Details</apex:outputLink>
            <apex:actionSupport event="onclick" action="{!getOppList}" rerender="pbAcc, pbOpp, oppAccDL, oppAccDR, oppOppList, pbAccDL, pbAccDR, pbOppD, pbPlanB, oppPlanBWS, pbPlanE, oppPlanE">
                <apex:param assignTo="{!SelectedAccountId}" value="{!Acc.Id}" name="SelectedAccountId"/>                  
                <apex:param assignTo="{!SelectedUserId2}" value="{!Acc.OwnerId}" name="SelectedUserId2"/>                    
            </apex:actionSupport>    
        </apex:column>    
        <apex:column headervalue="Account Name" style="background-color:{!IF(Acc.Id=SelectedAccountId,"#7394ce","")}">
            <apex:outputField value="{!Acc.Name}" />
            <apex:actionSupport event="onclick" action="{!getOppList}" rerender="pbAcc, pbOpp, oppAccDL, oppAccDR, oppOppList, pbAccDL, pbAccDR, pbOppD, pbPlanB, oppPlanB, pbPlanE, oppPlanE">
                <apex:param assignTo="{!SelectedAccountId}" value="{!Acc.Id}" name="SelectedAccountId"/>     
                <apex:param assignTo="{!SelectedUserId2}" value="{!Acc.OwnerId}" name="SelectedUserId2"/>                                    
            </apex:actionSupport>
        </apex:column>                  
         <apex:column headervalue="Berater" style="background-color:{!IF(Acc.Id=SelectedAccountId,"#7394ce","")}">             
            <apex:outputField value="{!Acc.Owner.Name}"/>                              
            <apex:actionSupport event="onclick" action="{!getOppList}" rerender="pbAcc, pbOpp, oppAccDL, oppAccDR, oppOppList, pbAccDL, pbAccDR, pbOppD, pbPlanB, oppPlanB, pbPlanE, oppPlanE">
                <apex:param assignTo="{!SelectedAccountId}" value="{!Acc.Id}" name="SelectedAccountId"/>                  
                <apex:param assignTo="{!SelectedUserId2}" value="{!Acc.OwnerId}" name="SelectedUserId2"/>                    
            </apex:actionSupport>
        </apex:column>                      
    </apex:pageblocktable>   

<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTables, 'js/jquery.js')}"></script>
<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTables, 'js/jquery.dataTables.js')}"></script>
<script type="text/javascript" language="javascript">
var j$ = jQuery.noConflict();
j$('table.dataTable').dataTable({
    sPaginationType: "full_numbers"
});
</script>

Thanks, peX

2 Answers 2

2

If you re-render the part of the page that contains the table, then you also have to re-register the JavaScript logic.

You can do this via the oncomplete attribute:

<apex:actionSupport oncomplete="addDataTable()" event="onclick" .../>

with the JavaScript moved into a function:

<script>
var j$ = jQuery.noConflict();
function addDataTable() {
    j$('table.dataTable').dataTable({
        sPaginationType: "full_numbers"
    });
}
// Add when page loads
addDataTable();
</script>
0

I suggest using StandardSetController for pagination. It has next() method which returns next set of records. StandardSetController

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .