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!

Marcel Tanuri · Accepted Answer · 2021-08-17 16:21:59Z

0

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.

answered Aug 17, 2021 at 16:21

Marcel Tanuri

215 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aftab Over a year ago

I looked for any error but don't see any. I reorganized the script order and put it at end but no luck.

Marcel Tanuri Over a year ago

maybe <liferay-ui:search-container-results> tag is generating HTML DOM in a different way from what DataTable expects

Marcel Tanuri Over a year ago

liferay-ui:search-container and DataTable have similar features. I'm not following what you need to have both on the same component

Aftab Over a year ago

Reason am trying to have a DataTable jquery function to add a Search and Sort ability to my portal data. <liferay-ui:search-container-results> is already bringing data that is what I initially asking but need to refine /filter it further. I am able to create table id okay I can see but don't understand why the DataTable part is not working. IT may be the case, data table is initiated first before my data is done putting on front end. Even I put the script at the end. Any idea? thanks!

Marcel Tanuri Over a year ago

DataTable is a javascript plugin while <liferay-ui:search-container-results> is a taglib for JSP. JSP always execute first than JS. I'd try init DataTable with some mock data first, just to remove any doubt.

Aftab · Accepted Answer · 2021-08-17 18:46:19Z

0

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!

answered Aug 17, 2021 at 18:46

Aftab

396 bronze badges

Collectives™ on Stack Overflow

How to add DataTable in Liferay custom Search container

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related