Add Ditto Pagination

If you plan on having multiple Ditto calls using pagination on one page or using Reflect in your template make sure you use the &id parameter.

Set it to a unique string and then update your placeholders to the format [+id_placeholder+]. For example, if your id was "foo" and your placeholder "pagetitle", you should use [+foo_pagetitle+]. Also, If you have PHx installed you will need to call Ditto cached on an uncached page.

  1. Add the following parameters to your Ditto call:

    &summarize=`10`
    &paginate=`1`
    &paginateAlwaysShowLinks=`1`
  2. Add the following below your Ditto call:

    <p>Showing <strong>[+start+]</strong> - <strong>[+stop+]</strong> of <strong>[+total+]</strong> Articles | Page <strong>[+currentPage+]</strong> of <strong>[+totalPages+]</strong></p>
    <div id="ditto_pages"> [+previous+] [+pages+] [+next+]</div>
  3. Add the following to your CSS file and modify to your liking:

    .ditto_paging{
    border-top:1px solid #ccc;
    padding:10px; 
    font-size:86%;
    color:black;
    }
    #ditto_pages .ditto_currentpage{
    border:1px solid black;
    padding:1px 5px 2px; 
    margin-right:1px;
    background-color:#008CBA; 
    color:#fff;
    }
    #ditto_pages .ditto_off{
    border:1px solid #ccc;
    padding:1px 5px 2px; 
    margin-right:1px;
    color:#ccc;
    }
    #ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited{
    border:1px solid #008CBA; 
    padding:1px 5px 2px; 
    margin-right:1px; 
    text-decoration:none !important; 
    color:black;
    }
    #ditto_pages a:hover{
    background-color:#fff;
    color:#000;
    }

Notes

When using pagination always call Ditto uncached (i.e. [!Ditto!] not [[Ditto]])

Ditto normally generates a single-level list of documents. But sometimes this list can be too long to comfortably display on a web page. So Ditto lets you divide the list into pages that you can flip through with "Previous" and "Next" links. Each time you click one of these links the current web page will refresh and display a different "page" from the overall list of Ditto items.

Ditto does not automatically add the pagination templates, so you can't get the "Previous" and "Next" links to appear merely by adding &paginate=`1` to the Ditto call.

You must add the desired pagination placeholders to your document yourself, for more information about the pagination placeholders click here

Suggest an edit to this page.