cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

display only 2 pages for pagination widget

alenaromi
11-Garnet

display only 2 pages for pagination widget

Hi ,

I have 16 pages and it displays 1 to 5 and then the 16th page no. on my screen.But I want to display only two nos and the next and previous button .I can do that for two pages,how do I do it when I have 16 pages?

for eg: I want " previous 5, 6,next "

instead of   "previous 1,2,3,4,5 ...16,next .

please check images for better understanding.

@pagination.JPG   This is what i want when i have 16 pages

 

16pagination.JPG but this is how it displays

1 ACCEPTED SOLUTION

Accepted Solutions

You will have to write some custom CSS to modify what is displayed for the paging widget.  Since there is not a custom CSS property for the paging widget you will have to specify the custom class on a parent container.  For the following code I put the custom class on the parent container

  1. Create a Custom Class ( hideExtraPages )
  2. Custom CSS
    /* Hide the | from the paging controls */
    .hideExtraPages .widget-paging .page-controls{
        visibility: hidden;
    }
    
    /* Make the other page controls visible*/
    .hideExtraPages .widget-paging .page-controls a, span{
        visibility: visible;
    }
    
    /* Hide the extra page displays */
    .hideExtraPages .widget-paging span.items-label, a.pagingcontroller, span.previous-ellipsis, span.next-ellipsis {
        display: none;
    }
    
    /* Show the Previous Page Button, Next Page Button, Next page number */
    .hideExtraPages .widget-paging a.previous-page, a.next-page, span.current-page + a {
        display: inline;
    }​
     

Sample Composer View: ( hideExtraPages is set on Container-5)

composer_view.png

 

Sample Mashup View:

mashup_view.png

View solution in original post

9 REPLIES 9

Are you using the OOTB widget that is part of Manufacturing apps or Service Apps?  If so can you please let me know what version you are using.

No,its is an existing widget .I am using the latest version of thingworx,8.5.x.

You will have to write some custom CSS to modify what is displayed for the paging widget.  Since there is not a custom CSS property for the paging widget you will have to specify the custom class on a parent container.  For the following code I put the custom class on the parent container

  1. Create a Custom Class ( hideExtraPages )
  2. Custom CSS
    /* Hide the | from the paging controls */
    .hideExtraPages .widget-paging .page-controls{
        visibility: hidden;
    }
    
    /* Make the other page controls visible*/
    .hideExtraPages .widget-paging .page-controls a, span{
        visibility: visible;
    }
    
    /* Hide the extra page displays */
    .hideExtraPages .widget-paging span.items-label, a.pagingcontroller, span.previous-ellipsis, span.next-ellipsis {
        display: none;
    }
    
    /* Show the Previous Page Button, Next Page Button, Next page number */
    .hideExtraPages .widget-paging a.previous-page, a.next-page, span.current-page + a {
        display: inline;
    }​
     

Sample Composer View: ( hideExtraPages is set on Container-5)

composer_view.png

 

Sample Mashup View:

mashup_view.png

Hey! Thank yo so much.This seems to work.
But now there is a major issue that i cant find the previous button.I I think that has also been hidden.I have 4 pages and now once I go to page 2,3 I cant go back to page 1 and same when I go to page 3,4 cant go back to page 1,2 and so on.Have attached pictures for ref. 

I am glad it seems to be working for you.  If the previous button is not visible please make sure the a.previous-page class selector is part of the display:inline formatting.  After going to page two the previous button should be visible, if it is not, use the browser tools and inspect the page two element (span.current-page).  The previous page xml will be visible there and css tools will help you figure out which rule is hiding the previous link.

I was just checking the code like you said,and  the previous button is set to visible please in the a.previous-page class selector is part of the display:inline formatting .The issue was just a small comma missing before  a.previous-page. It is visible now.Thanks a lot for your help.

Hi,
I was thinking if it'll be possible to only show the 2 pages like we are now and then put a link and display the last page so that the user knows the no. of pages visible on the screen.
For example if i have 20 pages,  1  2  ... 20  Next  ,   Prev  2  3  ... 20  Next  ,    Prev  18  19   20  .

slangley
23-Emerald II
(To:alenaromi)

Hi @alenaromi.

 

Do you still have a question?  It's unclear from your last post especially since you already marked the Accepted Solution.

 

Please advise.

 

Regards.

 

--Sharon

It is a doubt related to the same topic
Top Tags