i have problem when i load the model and press edit on the edit button then render the datatable i lose the JS sorting i'm using datatables and i don't want to render the datatable JS again with edit please can help me.
<h:panelGroup layout="block" class="box-header">
<h3 class="box-title">Branches</h3>
<h:commandButton value="Add New Branch" id="createBranchBtn" pt:data-loading-text="Loading..." pt:autocomplete="off" class="btn btn-primary sye-action-btn-loading">
<f:param name="pageType" value="create"/>
</h:commandButton>
</h:panelGroup>
<h:panelGroup layout="block" class="box-body table-responsive no-padding branches-datatable">
<div class="SYE-modal"> </div>
<h:panelGroup id="branchesListDiv" layout="block" class="container-fluid">
<h:dataTable id="example1" binding="#{index}" class="table table-hover table-bordered table-striped" value="#{branchesMB.list}" var="branch">
<h:column>
<f:facet name="header" >
<h:outputText value="#"/>
</f:facet>
<h:outputText value="#{index.rowIndex+1}"/>
<f:facet name="footer" >
<b><h:outputText value="#"/></b>
</f:facet>
</h:column>
<h:column >
<f:facet name="header">
<h:outputText value="Branch Name"/>
</f:facet>
<h:outputText value="#{branch.branchName}"/>
<f:facet name="footer">
<b><h:outputText value="Branch Name"/></b>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Address"/>
</f:facet>
<h:outputText value="#{branch.branchAddress}"/>
<f:facet name="footer">
<b><h:outputText value="Address"/></b>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Abbreviation"/>
</f:facet>
<h:outputText value="#{branch.branchAbbreviation}"/>
<f:facet name="footer">
<b><h:outputText value="Abbreviation"/></b>
</f:facet>
</h:column>
<h:column headerClass="syeActionDatatable">
<f:facet name="header">
<h:outputText value="Action"/>
</f:facet>
<f:facet name="footer">
<b><h:outputText value="Action"/></b>
</f:facet>
<div class="btn-group" >
<a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</a>
<ul class='dropdown-menu pull-right'>
<li>
<!--pt:data-toggle="modal" pt:data-target=".bs-example-modal-lg"-->
<h:commandLink actionListener="#{branchesMB.setEntityEditObject(branch)}" class="editDatatable" >
<f:ajax onevent="load" onerror="load" render=":branchesForm:branchEditArea"/>
<i class='glyphicon glyphicon-pencil'></i>
Edit
</h:commandLink>
</li>
<li>
<!--onclick="if (!confirm('Are you sure you want to delete this record?')) return false"-->
<h:commandLink action="#{branchesMB.destroy()}" onclick="if (!confirm('Are you sure you want to delete this record?'))
return false;">
<f:ajax render=":branchesForm:branchEditArea"/>
<f:setPropertyActionListener target="#{branchesMB.entityDeleteObject}" value="#{branch}"/>
<i class='glyphicon glyphicon-trash'></i>
Delete
</h:commandLink>
</li>
</ul>
</div>
</h:column>
</h:dataTable>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Branch</h4>
</div>
<div class="modal-body">
<h:panelGroup id="branchEditArea" layout="block" class="box-body">
<ui:include src="/view/includes/messages.xhtml"/>
<h:inputHidden value="#{branchesMB.entityEditObject}" converter="BranchesConverter"/>
<h:panelGroup id="branchNameDiv" layout="block" class="form-group">
<h:outputLabel value="Branch Name" for="branchName"/>
<h:inputText id="branchName" class="form-control" value="#{branchesMB.entityEditObject.branchName}" />
</h:panelGroup>
<h:panelGroup id="branchAddressDiv" layout="block" class="form-group">
<h:outputLabel value="Branch Address" for="branchAddress"/>
<h:inputText id="branchAddress" class="form-control" value="#{branchesMB.entityEditObject.branchAddress}"/>
</h:panelGroup>
<h:panelGroup id="branchAbbreviationDiv" layout="block" class="form-group">
<h:outputLabel value="Abbreviation" for="branchAbbreviation"/>
<h:inputText id="branchAbbreviation" class="form-control" value="#{branchesMB.entityEditObject.branchAbbreviation}"/>
</h:panelGroup>
</h:panelGroup>
</div>
<div class="modal-footer">
<!--pt:data-dismiss="modal"-->
<h:commandButton id="close" value="Close" class="btn btn-default" >
<f:ajax render="branchesForm:branchesListDiv"/>
</h:commandButton>
<h:commandButton id="edit" value="Edit" action="#{branchesMB.update()}" class="btn btn-primary sye-action-btn-loading" pt:data-loading-text="Loading..." pt:autocomplete="off">
<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" execute="branchEditArea branchesForm:branchesListDiv"/>
</h:commandButton>
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" class="box-footer">
Branches
</h:panelGroup>
</h:form>
<ui:define name="scriptPlugins">
<h:panelGroup id="scriptPlugins">
<script src="#{request.contextPath}/resources/SYE-2.1.1/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="#{request.contextPath}/resources/SYE-2.1.1/plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
</h:panelGroup>
</ui:define>
