Paging

To create List with a paging area, use the following code:

data = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    },
    pager:{
        container:"paging_here",
        size:20,
        group:8
    }
});

The pager object contains the properties given below:

• container - the id of an HTML container where a pager will be placed (mandatory)
• size - count of objects per page
• group - count of visible page selectors

Related sample:  Paging

Navigation Between Pages

var pager = view.config.pager;
pager.select(page_number);

Changing Pager's Settings

var pager = view.config.pager;
pager.define("group",5); // set group as 5
pager.define("size",25); // 25 objects per page
pager.refresh();

Configurable properties are:

• page - current page
• limit - total count of pages
• group - count of pages in the single visible group
• size - count of items per page

Custom Pager's Skins

//default
pager.define("template","{common.pages()}");
//custom
pager.define("template","{common.first()}{common.pages()}{common.last()}");
pager.define("template",
"{common.prev()}<div class='paging_text'>Page #page# from #limit#</div>{common.next()}");

Supported objects are:

• common
  
  • common.pages() - block of page-buttons
  • common.first() - "first page" button
  • common.last() - "last page" button
  • common.prev() - "previous page" button
  • common.next() - "next page" button
• obj
  • obj.page - current page
  • obj.limit - total number of pages
  • obj.size - count of items per page

Related sample:  Custom paging

Pager's Events

The list of supported pager's events includes:

• onAfterPageChange
  • new page number
  • old page number
• onBeforePageChange
  • new page number
  • old page number

Back to top