[SalesForce] jQuery Datatable disappears once rerender the pageBlockTable using actionFunction. Any suggestions

i am calling a method to bring the latest data from SAP on click of a button "Refresh" using actionFunction and set to rerenders pageBlockTable. But, after rerendering happens the entire datatable related things vanished and default salesforce pageBlockTable came. How to manage this issue? All the tabs as shown in the screen shot having pageBlockTable and datatable plugin implemented.

Before refresh:

enter image description here

After refresh:

enter image description here

VF Page:

    <apex:page standardController="Account" extensions="OpenDocumentsController" showHeader="false" sidebar="false">
<apex:stylesheet value="{!URLFOR($Resource.jQueryDataTablesZip, 'css/jquery.dataTables.css')}"/>
<style type="text/css">
.sorting {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_both.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
table.dataTable tr.odd { background-color: white; }
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: white; }
table.dataTable tr.odd td.sorting_2 { background-color: white; }
table.dataTable tr.odd td.sorting_3 { background-color: white; }
table.dataTable tr.even td.sorting_1 { background-color: white; }
table.dataTable tr.even td.sorting_2 { background-color: white; }
table.dataTable tr.even td.sorting_3 { background-color: white; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    padding: 10px;
}
</style>

    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
</style>


<body>
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="Open Sales Orders" name="name1" id="tabOne">

         <apex:outputPanel onclick="methodOneInJavascript()" styleClass="btn"> 
        Refresh 
    </apex:outputPanel>
    <apex:form >

    <apex:actionFunction action="{!refreshOpenSalesOrders}" name="methodOneInJavascript" rerender="pb">

    </apex:actionFunction>
    </apex:form>
                    <apex:pageBlock title="Open Sales Orders" rendered="{!displayOpenSalesOrders}" Id="pb">
                <apex:pageBlockSection columns="1">
                    <apex:outputText label="Number of Sales Orders" value="{!NumOf}" id="noof"/>            
                    <apex:outputText label="Total Amount" id="totalamount" value="{0,number,0.00}">
                        <apex:param value="{!TotalAmount}" />
                    </apex:outputText>
                </apex:pageBlockSection>
                <apex:pageBlockTable value="{!OpenSalesOrders}" var="so"  styleClass="dataTable1">
                    <apex:column headerValue="Order #" value="{!so.OrderNo}"/>
                    <apex:column headerValue="Document Date">
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!so.DocumentDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Purchase Order #" style="width:10%;" value="{!so.PurchaseOrderNo}"/>
                    <apex:column headerValue="Sales Org" style="width:10%;" value="{!so.SalesOrg}"/>
                    <apex:column headerValue="Amount" style="text-align:right;width:10%;" value="{!so.Amount}"/>
                    <apex:column headerValue="Currency" style="text-align:center;" value="{!so.Curren}"/>
                    <apex:column headerValue="Products" style="width:30%;" value="{!so.Product}"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
            <script type="text/javascript" language="javascript">
            var j$ = jQuery.noConflict();
            j$('table.dataTable1').dataTable({
                sPaginationType: "full_numbers"
            });
            </script>  


        </apex:tab>
        <apex:tab label="Open Deliveries" name="name2" id="tabTwo">

            <apex:pageBlock title="Open Deliveries" rendered="{!displayOpenDeliveries}">
                <apex:pageBlockSection columns="1">
                    <apex:outputText label="Number of Deliveries" value="{!NumOf}" id="noof"/>          
                </apex:pageBlockSection>
                <apex:pageBlockTable value="{!OpenDeliveries}" var="del"  styleClass="dataTable2">
                    <apex:column headerValue="Delivery Number" style="width:10%;"  value="{!del.DeliveryNumber}"/>
                    <apex:column headerValue="Ship to Party" value="{!del.ShipToParty}"/>
                    <apex:column headerValue="Ship to Party Name" value="{!del.ShipToPartyName}"/>
                    <apex:column headerValue="Delivery Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!del.DeliveryDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Planned GI Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!del.GIDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Products" style="width:30%;" value="{!del.Product}"/>
                </apex:pageBlockTable>

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


        </apex:tab>

Best Answer

apex:actionFunction has an oncomplete attribute where you can specify JavaScript to run once the partial page update has completed. So you will need to move your DataTables setup code into a function that can be called from there as well as the page ready event so the DataTables JavaScript is run after the Ajax update.

(Personally I try to avoid putting Ajax updates in pages that use a lot of jQuery logic as the combination of the two is hard to get right.)

Related Topic