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.

6 Replies

Sort By
  • 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?

  • dhiraj_gophane's avatar
    dhiraj_gophane
    Leader
    11 years ago

    Hi,

     

    You cannot use liaAddScript in endpoint. If you want to use script in endpoint use, <script> tag.

     

    But for this you dont need to include javascript in endpoint. Call endpoint from custom component using AJAX call. Then append the response with pagination from endpoint to any div. Use javascript logic in component.

     

    Change urls of page numbers and pre-next link. Make it to redirect to same page and pass page number as parameters.

     

    You can use text of number to set page paramter.

    e.g. <a href="<page_url>?page=2">2</a>

     

    For prev - subtract 1 from current page.

    For next - add 1 to current page.

     

    Handle end value cases.

     

    Hope this helps.

     

    Thanks,

    Dhiraj

  • 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.