How to add DataTable in Liferay custom Search container

Question

I am trying to add a search and sort functionality on the client side using DataTable into my Liferay Search Container that brings data. However for some reason it is showing up on top of my data generated by my portlet and thus not applying into the portlet data. Note I am not using any json object or rendering the data from my java code, it's the container is built and then displayed on my view.jsp page. Here is some code:

     <liferay-ui:search-container delta="20" deltaConfigurable="<%= true %>" iteratorURL="<%=formDataUrl %>" total="<%=FormDataWrapperLocalServiceUtil.getFormDataWrappersCount() %>">

     <table id="userTable" class="display" cellspacing="0" width="100%">
     <thead>
            <tr>
                <th>Field1</th>
                <th>Field2</th>
                <th>Field3</th>
                <th>Field4</th>
            </tr>
    </thead>
 
<tbody>
      <liferay-ui:search-container-results results="<%= 

My Javascript code:

<script>
 $(document).ready(function() {
                $('#userTable').DataTable();
            } );
 </script>

Please let me know what am I doing wrong here. Thank you in advance!

Answer 1

Ok finally got this working! Phew! The DataTable command was applying before the table id was generated so had to put both of them, one after another on the same script tags. It's all working!