DHTMLX Docs & Samples Explorer

Paging

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

It will produce a dataview with paging area. Pager object can contain next properties

  • container - id of html container, where pager will be placed ( mandatory )
  • size - count of objects per page
  • group - count of visible page selectors

Navigation between pages

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

Changing pager settings

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

Configurable properties

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

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

Supported objects

  • 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

Events of pager

  • onafterpagechange
    • new page number
    • old page number
  • onbeforepagechange
    • new page number
    • old page number