How to add DataTable in Liferay custom Search container-CodePudding

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!

CodePudding user response：

It looks like some CSS or JS conflict, but it should work fine.

Check if DataTable plugin has printed some warning or error in the web console that helps you see what is missing.

CodePudding user response：

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!