Jquery datatable functionality not apply after render the datatable in <f:ajax>

Question

here is jquery script

 <script type="text/javascript" charset="utf-8">
                var oTable;
                               $(document).ready(function() {
                                    oTable = $('#example').dataTable({   
                                    "bJQueryUI": true,
                                    "sPaginationType": "full_numbers",
                                    "bRetrieve": true
                                       } );
                               } );

                               function datatable()
                               {
                                  oTable.fnDestroy();                                                                            
                                   oTable = $('#example').dataTable({
                                    "bJQueryUI": true,
                                    "sPaginationType": "full_numbers",
                                   "bRetrieve": true
                                     } );
                               }
            </script>

here is model panal script

 $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    show: "blind",
                    hide: "explode",
                    width: "400px",
                    modal: true ,
                    buttons: {
                        "register-close" : function() {
                    $("#register").click();
                  datatable();
                    $( this ).dialog( "close" );

                    }

        }
            });

here is the buton click code

<h:commandButton value="Register" action="#{employeeListBean.register}" id="register" style="display: none" onclick="alert('asdsa')" >
                                <f:ajax execute="userId password empName Address gender mobNo loginname"  render=":example"/>
                            </h:commandButton>

when i click on that button edit done successfully and datatable is also also render now problem is that jquery datatable functionality is not applied on the table after render datatable.

Answer 1

you need to re-apply the table() upon ajax event render,

add this code...

$(window).load(function() {
    jsf.ajax.addOnEvent(function (data) {
        if (data.status === "success") {
            oTable = $('#example').dataTable({   
                     "bJQueryUI": true,
                      "sPaginationType": "full_numbers",
                       "bRetrieve": true
             } );
        }
    }
});