Reload or Rerender Jquery Datatable on RadioButton click

Question

I want to reRender table when i click on RadioButton but it is not working. I have tried:

j$('#example1').dataTable()._fnAjaxUpdate();

But I get this error message:

VF page

    <apex:page id="page" controller="AttachmentListWithFilterController" docType="HTML-5.0" sidebar="false" readOnly="true">
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>
     <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/>

 <script type="text/javascript">

          j$ = jQuery.noConflict();

             j$(document).ready(function(){
             alert('Hiii');
            j$("#example1").dataTable();  
             j$('#example1').dataTable()._fnAjaxUpdate();

        });          

   </script>
    <apex:Form id="form">
    <apex:inputhidden id="selectedF" value="{!selectedFiles}"/>
       <apex:actionFunction name="callfind" action="{!searchByRange}" reRender="PGTable" status="actStatusId" />
   <apex:pageBlock id="pb" >
   <apex:pageblockSection title="Select Type" collapsible="false">          
             <apex:selectRadio value="{!Selected}">
                <apex:actionSupport event="onchange" action="{!TakeOther}" oncomplete="switch()" reRender="PGTable,pblock,showOwner,showslider,slidervalue" onComplete="initPageBlockTableEnhancer(),checkMethod();"/>
                   <apex:selectoptions value="{!radioValues}" />
            </apex:selectRadio>
   </apex:pageBlockSection>
<table id="example1" class="table table-bordered table-striped" role='grid'>

        <thead>
            <tr role="row">
                <th>Select CheckBox</th>
                <th>Name</th>
                <th>BodyLength</th>
                <th>Created Date</th>
                <th>Owner Name</th>
                <th>(Click To View)</th>
            </tr>
        </thead>

           <tbody>

           <apex:repeat value="{!wraplist}" id="demoid" var="a" rendered="{!renderName1}">


           <tr>
    <td>  <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet> 
                        <apex:inputCheckbox value="{!a.selected}" id="inputId" /></td>
    <td> <apex:outputText value="{!a.Name}"/></td>
    <td> <apex:outputText value="{!a.size}"/></td>
    <td> <apex:outputText value="{!a.Mydate}"/></td>
    <td> <apex:outputText value="{!a.OwnerName}"/></td>
    <td>  <apex:commandLink value="View" action="{!viewAttach}" target="_blank" >
                    <apex:param id="Wrapid" name="Attid" value="{!a.index}" assignTo="{!opget}"/>
              </apex:commandLink>&nbsp;
               <apex:commandLink value="Delete" action="{!deleteAttch}" reRender="PGTable">
                      <apex:param id="Deleteid" name="delete" value="{!a.index}" assignTo="{!opget}"/>
                 </apex:commandLink>  </td>
    </tr>

     </apex:repeat>


   </tbody>

    </table>

Answer 1

Here is what I have done

1. Wrap the table in an outputpanel so it can be rerendered

   <apex:outPutPanel layout="block" id="tblData" styleClass="col-md-12">
       <table id="cnb-table" class="table table-striped table-condensed dt">
           ......
       </table>
   </apex:outPutpanel>
   

2. When the data needs to be changed I rerender the tblData panel

3. in the oncomplete of the action function I redraw the data table

    <apex:actionFunction name="changeAlias" action="{!reQuery}" 
       oncomplete="drawTables();" status="recStatus" reRender="tblData">
   

JS code to redraw

function drawTables(){
    $('[id$=cnb-table]').DataTable({
        "language": {
                      "emptyTable": "No Opportunities Found",
                      "zeroRecords": "No opportunities match your filter criteria"
                    },
        "destroy" : true,
        "autoWidth" : false,
        "columnDefs": [
                    {
                        "targets": [ 7,8 ],
                        "visible": false,
                        "searchable": true
                    },
                    { 
                        "width": "12%", 
                        "targets": [3,4] 
                    },
                    { 
                        "width": "5%", 
                        "targets": [2,5,6] 
                    }

                ],
                "footerCallback": totalCallBack



    });
}

The important part of this is the destroy: true as this will destroy the table if it already exists and redraw it.

Using the latest Datatables version. May not be the best way to do it but it works fine for us.