Consuming paged data in a datatable

Site and Services
1

Hi

I have a REST-service made using Apigility. It returns data in json, in a specific format. (See apigility.org).
I can easily make the datatable consume these data, by making a new datadriver.

However, the REST-service will always return pages of data: 25 records on each page, and starting on page boundaries. I can configure the amount of records on a page, but I cannot get it to start on arbitrary pages.

A datatable can attach the starting point and record count the the url when requesting more data. But can I configure it to always have the start-value be on a page boundary? Making the start-parameter always be a multiple of 25?

-mads

2

Yes, the simplest case, if you are using the built-in paging, just set the page size to 25

webix.ui({
    rows:[
        { 
            view:"datatable",
            pager:"pagerA", //linking to a pager
        },
        {
            view:"pager", id:"pagerA",
            size:25,
            group:5
        }]
})

If you want to load data during scrolling, not a real paging, you can use onDataRequest event handler, intercept default loading call and set your own start and count values

http://docs.webix.com/api__link__ui.proto_ondatarequest_event.html

3

Thanks for the hints. I’m trying to load data during scrolling.

But I cannot get the onDataRequest to work. When I place and ajax-call inside it, and tries to parse the returned data into the datatable, it goes into an endless loop.

I have tried something like this:

              onDataRequest: function (start, count, callback, url) {
                    var page = Math.ceil(start / 25),
                        url = this.config.url + '?page=' + (page + 1),
                        dtable = this
                        ;

                    webix.ajax(url, function(text, data, XmlHttpRequest) {
                        console.log("Got data: ", data);
                        dtable.parse(data);
                    });

                    return false; //cancelling default behaviour
                },

But it goes into an endless loop.

4

I solved it by making a proxy and a datadriver:

webix.proxy.apigility = webix.extend({
    $proxy: true,
    params: {
        page: 1
    },
    load:function(view, callback, options){
        var ajax;

        if (options) {
            this.params.page = Math.floor(options.from / 25) + 1;
        }

        ajax = new webix.ajax();
        ajax._send(this.source, this.params, callback, view, 'GET');

    }
}, webix.proxy);

webix.DataDriver.apigility = webix.extend({
    child: 'planter',

    getRecords: function(data) {
        data = webix.DataDriver.json.getRecords(data);
        return data[0]._embedded[this.child];
    },

    //get count of data and position at which new data need to be inserted
    getInfo:function(data){
        var info = webix.DataDriver.json.getInfo(data);

        info._size = data.total_items;
        info._from = (data.page - 1) * data.page_size;
        info._page = data.page;
        info._page_size = data.page_size;

        return info;
    }

}, webix.DataDriver.json);
  • now the only thing I need is to dynamically get the pagesize to use in the datadriver. The code above assume that it is always 25 records.
5

Do you need to get the actual size from a paging control, or do you need to apply the size from the data.page_size to the pager?

DataDriver is isolated from a component, so it will be hard to access any controls from there without using hardcoded IDs. You can add the event handler to component which uses paging,

table.data.attachEvent("onParse", webix.bind(function(driver, data){
       //call method of driver, or read data from driver and change the UI here
       //this.config.pager will reffer to the related paging control
}, table));
6

I think the latter - the webservice that I get my data from, will deliver it in pages, each time also in the returned JSON, it will tell me how many items on a page.
I would like this pagesize, from the JSON, to be used by the component.

I will try playing with your suggestion. Thanks.