Search container with pagination on Liferay popup without refresh the page

As Many times we have requirement to use search  container on popup with pagination. i have found solution  of this .

for this just use <div> and  aui-io-plugin in search container then it will not refresh the page .

for example:

I have search container that displays list of users on my pop page .

<liferay-ui:search-container delta="5" iteratorURL="<%= renderURL %>" emptyResultsMessage="empty-users"  >

<liferay-ui:search-container-results>


<%       
          results=ListUtil.subList(list3,searchContainer.getStart(),searchContainer.getEnd());
       
        total = list3.size();
        pageContext.setAttribute("results", results);
        pageContext.setAttribute("total", total);
       
%>
   
</liferay-ui:search-container-results>   
 /*****************Now  create a <div> ex : searchUsers*****************************/
  
<div class="taglib-search-iterator-page-iterator-bottom" id="<portlet:namespace />searchUsers">

<liferay-ui:search-container-row className="com.liferay.portal.model.User"  modelVar="user" keyProperty="userId" >       


<liferay-ui:search-container-column-text name="Last Name"  property="lastName"  />
<liferay-ui:search-container-column-text name="First Name" property="firstName" />
</liferay-ui:search-container-row>

    /************     create paginate false**********************/

<liferay-ui:search-iterator searchContainer="<%= searchContainer %>" paginate="<%= false %>" />

  /************     can choose type of pagination**********************/

<c:if test="<%= results.size() > 0 %>">
 
   
        <liferay-ui:search-paginator searchContainer="<%= searchContainer %>"  type="article"  />
   
   
</c:if>
</div>
  /************     end of <div>**********************/
   </liferay-ui:search-container>
        /************     end of search conatiner**********************/

//This is Script we use  for pagination give here our div name ex :<portlet:namespace />searchUsers
<aui:script use="aui-io-plugin">
    var searchUsers = A.one('#<portlet:namespace />searchUsers');
   
    if (searchUsers) {
        var parent = searchUsers.get('parentNode');
        console.log(parent);

        parent.plug(
            A.Plugin.IO,
            {
                autoLoad: false
            }
        );

        searchUsers.all('a').on(
            'click',
            function(event) {
                var uri = event.currentTarget.get('href').replace(/p_p_state=normal/i, 'p_p_state=exclusive');

                parent.io.set('uri', uri);
                parent.io.start();

                event.preventDefault();
            }
        );
    }
</aui:script>
also you have to set the your render url wich you are using in search container  
write the code before search container like
<%
PortletURL renderURL = renderResponse.createRenderURL();
    renderURL.setWindowState(LiferayWindowState.NORMAL);
    renderURL.setParameter("jspPage","/html/user-lookup/recordDisplay.jsp"); //current page path
    renderURL.setParameter("username",username);
    renderURL.setParameter("firstname",firstname);//list of parameters thats need to page
    renderURL.setParameter("lastname",lastname);
  
%> 


Thanks
Hope this will help you.