0

I'm using jquery pagination in VF page. So when I re-render the table then jquery pagination functionality is not showing. Reference link.

So I've to call the jquery function addDataTable from oncomplete event.

I've to call oncomplete event from actionfunction and commandbutton both. In both case action is executing complete and I'm getting result in {!test}.

In my below demo oncomplete event is not calling the jquery function. Can you please help me.

VF page code;

<apex:page controller="ctrlAccController"  >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
<apex:includescript value=" //cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

<script>
function logic(){
    alert('logic');
        callmethod();
    }

    $(document).ready(function() {
    addDataTable();
    function addDataTable() {alert('load');
        $('table.dataTable').dataTable({}); 
    }

});
</script>

<apex:form >
  {!test}
    <apex:actionFunction  name="callmethod" action="{!save1}"  reRender="section" status="actStatus" oncomplete="addDataTable();"/>

    <apex:pageBlock mode="inlineEdit" id="pageblock">
    <apex:commandbutton value="CommandButton" action="{!save1}"  status="actStatus"  reRender="section" oncomplete="addDataTable();"/>
    <apex:commandButton onclick="logic(); return false;" value="using ActionFunction" />    

    <apex:actionStatus id="actStatus" >
            <apex:facet name="start" >
              <img src="/img/loading.gif" />                    
            </apex:facet>
    </apex:actionStatus>

    <apex:pageBlockSection id="section" title="test">
        {!test} 
    <apex:pageBlockTable value="{!showList}" id="table" var="a1" styleClass="dataTable" >

        <apex:column styleClass="memo" headerValue="ID">
            <apex:outputField value="{!a1.Id}" />
        </apex:column>
        <apex:column styleClass="memo" headerValue="name">
            <apex:outputField value="{!a1.Name}" />
        </apex:column>
        <apex:column styleClass="memo" headerValue="Industry">
            <apex:outputField value="{!a1.Industry}" />
        </apex:column>
        <apex:column styleClass="memo" headerValue="Account Number">
            <apex:outputField value="{!a1.AccountNumber}" />
        </apex:column>

    </apex:pageBlockTable>
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

1 Answer 1

0

Your addDataTable() method is out of scope, since it is contained in the "document ready" event only, it won't be available out of it.

Try declaring it the following way instead:

function logic(){
    alert('logic');
    callmethod();
}

function addDataTable() {
    alert('load');
    $('table.dataTable').dataTable({}); 
}

$(document).ready(function() {
    addDataTable();
});

You must log in to answer this question.

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