Forum Discussion

cike's avatar
cike
Champion
11 years ago

Custom Pagination in endpoint links to "unknownpage"

Hey,

 

I developed a custom components including a custom pagination like this: http://community.lithium.com/t5/Developers-Discussion/Implement-custom-pagination/m-p/106695/highlight/true#M3927

 

Everything works pretty well if I use only one of my components per page. But for my use case I want to use three different custom components, all with their own custom pagination, on one page (Displayed in the same area, but selected through a custom tab component).

 

This causes some issues, because all components use the same pagination. To solve this, I had the idea to change all my custom components to endpoints and call them via AJAX from my tabbing component.

 

But now my pagination is broken. All links (page 2, page 3, and so) refer to an URL like "../unknownpage/page/2..".

 

I think this issue is caused by the specific behavior of endpoints.

 

Does anyone got some experience with similar problems and get some hints how to resolve them?

 

Thanks and regards,

Christian

  • nathan's avatar
    nathan
    11 years ago

    If you use the page URL to embed the page number, you'll need to use a different parameter name for each component. You could do this with a simple prefix.

     

    For example, the URL for you page might be:

    http://community.lithium.com/t5/Knowledge-Support/ct-p/knowledgeandsupport?comp1_page=1&comp2_page=3&comp3_page=2

     

    However, this starts to look very messy, and you have to persist all the parameters when changing page for just one component.

     

    A better approach is to use JavaScript inside the component to call the REST API (or a custom endpoint if appropriate) and update the HTML content of the component. The next/previous links will need to execute a JavaScript function to get the next/previous page of data and update the content.

  • nathan's avatar
    nathan
    Executive
    11 years ago

    If you use the page URL to embed the page number, you'll need to use a different parameter name for each component. You could do this with a simple prefix.

     

    For example, the URL for you page might be:

    http://community.lithium.com/t5/Knowledge-Support/ct-p/knowledgeandsupport?comp1_page=1&comp2_page=3&comp3_page=2

     

    However, this starts to look very messy, and you have to persist all the parameters when changing page for just one component.

     

    A better approach is to use JavaScript inside the component to call the REST API (or a custom endpoint if appropriate) and update the HTML content of the component. The next/previous links will need to execute a JavaScript function to get the next/previous page of data and update the content.

    • dhiraj_gophane's avatar
      dhiraj_gophane
      Leader
      11 years ago
      Hi cike,

      As Nathan said you need to use javascript to manipulate urls of page numbers and prev next links.

      Endpoint do not have context of current page, so it cannot set urls of pages correctly.

      So solution would be to use a parameter "page".

      in component you use it as,

      <#assign pageNum = http.request.parameters.name.get("page","1") />

      and while changing urls of page number and Pre-next link set page parameter value depending on current page.

      Hope this helps.

      Thanks,
      Dhiraj
      • cike's avatar
        cike
        Champion
        11 years ago

        Hey,

         

        I also thought about this, but unfortunatly I didn't get my JavaScript to work within an endpoint.

        I use the common code snippet to include it.

         

        <@liaAddScript
  (function($) {

  })(LITHIUM.jQuery)
</@liaAddScript>

        Again, I think it is one the endpoint specifics. Is there an other approach to include JavaScript/jQuery in my endpoints?

    • cike's avatar
      cike
      Champion
      11 years ago

      Thanks guys. :smileyhappy:

       

      I used a combination of your approaches to solve my issues. I use different page parameters and different endpoints to build my custom message lists. Within these endpoints I read the corresponding page parameter from the freemarker context object.