Paging for list !

Webix JS
1

Hi all !

I’m using a list and a pager


{
    view: "list",
    id: "lstResults",
    type: {
         height: 80
    },
    scroll: 'y',
    template: "#rank#. <span class=\"nameResults\">#ten#</span>",
   select: true,
   pager: "pagerA"
},
{
   view: "pager",
   id: "pagerA",
   template: '{common.prev()}{common.next()}Page {common.page()} from #limit#',
   size: 20,
   group: 3,
}

I’ve a RESTful services with param for paging: myurl + ‘&startpage={start}&maxrow={max}’

  • startpage: current page
  • maxrow: limit records in a page

data return format:

{
  "CurrentPage": #page,
  "PageSize": #limit,
  "SearchResults": [#arrayRecords]
  "Total": #totalRecordsFound
}


$$('lstResults').getPager().config.count = data.Total;

But the pager not render exactly ( Total pages: 1 , Total in data return: 3000) and i click button of pager then my web page is reload.

Please support me ?

2

@Helga: can you help me ? i can send to you a file source code via email !

3

Well, pager limit is counted automatically on the base of total data count and pager size parameter.

In case you are setting the count dynamically, you should as well refresh the pager to redraw it on the page:

$$('lstResults').getPager().config.count = data.Total;
$$('lstResults').getPager().refresh();
4

@Helga: the pager is auto config with my param services ? or manual ?

http://webix.com/snippet/ba70bc12

5

Hello,

  1. I studied the snippet and noticed an quite ambigouos thing:

The value of data.Total that you are setting as a limit for the pager is not the total data count indeed. Total data count for the pager is the number of data records in the component, which is in fact reflected in data.SearchResult.length (or data.currentResult).

So the right settings are:

$$('lstResults').getPager().config.count = data.SearchResult.length;//data.CurrentResult
$$('lstResults').getPager().refresh();

Moreover, you needn’t manually update the pager - its parameters will be calculated automatically on the base of current list data. So you can totally omit the code.

  1. You can call a parse function instead of running a loop with item adding:
//new item will be added at the end of current dataset
$$("lstResults").parse({
       data:data.SearchResult, 
       pos:$$("lstResults").count()
});

The only thing is that data fields should coincide with template properties of the list.

http://webix.com/snippet/34f34599