Search code examples
ajaxliferayliferay-6

Dynamically change search container results in liferay

I think my question is similar to this How to search inside of a search container in liferay.

So the page onload has a jsp variable which sets

<liferay-ui:search-container-results>
    <%                  
    results = ListUtil.subList(myList, searchContainer.getStart(), searchContainer.getEnd());
    total = myList.size();
    pageContext.setAttribute("results", results);
    pageContext.setAttribute("total", total);
    %>
</liferay-ui:search-container-results>

Is there a way to dynamically change the myList through ajax? In the backend I will be filtering it and returning a json object to replace the myList variable.

Would appreciate assistance in how to replace the myList variable and hence refresh the searchContainer table

Solution

  • Even though the questions seem related, you want to do something different than him.

    So to answer your question, the implementation your are thinking of can not be done. Reason:

    The myList variable is a variable which exists server side. Your JavaScript code runs on the client side. You have no way of manipulate the content of a java variable with JavaScript.

    What can be done is the following:

    After you have retrieved your JSON response, you remove the HTML for the result rows in the search container and replace it with HTML which you generate in your JavaScript. This can be a little tricky, because you want to replicate exactly the HTML that the liferay-ui:search-container-results tag produces, because otherwise your styling will be broken.

    There is one other way than this. Get all search results and display them and do the rest via JavaScript (pagination, search in the table, etc.) For example you could use this: https://www.datatables.net/

    or

    https://mottie.github.io/tablesorter/docs/example-pager-filtered.html

    Be warned, this can get a little bit slow if you reach a critical point of entries displayed ;)