Webix Datatable || Load data server side

Question

I have data in thousands so it takes time to load data. that why I need to load limited data from the server-side.so it can load faster. For example, by default it fetches data from only for one page but when I click on the second page it fetches data from a server for second page and so on. Here is my code

webix.i18n.pager = {
    first: "First",
    last: "Last",
    next: "Next",
    prev: "Prev"
};

var columnConfig = [
    { id:"select", header:{ content:"masterCheckbox", css:{"text-align":"center"} },    fillspace:0.8, css:{"text-align":"center"},     template:"{common.checkbox()}"},
    { id:"id",      header:"",              hidden:true},
    {
        id:"name",
        header:["Name", {content:"textFilter"}],
        fillspace:4,
        sort:"string"
    },
    {
        id:"city",
        header:["city", {content:"textFilter"}],
        fillspace:4,
        sort:"string"
    },
    {
        id:"email",
        header:["email", {content:"textFilter"}],
        fillspace:4,
        sort:"string"
    },
    { id:"edit",            header:"",              fillspace:0.8,      template:'<i class="fa fa-edit btn-edit"></i>',css:{"cursor":"pointer"}},
    { id:"delete",          header:"",              fillspace:0.8,      template:'<i style="color:red" class="fa fa-trash-o btn-delete"></i>',css:{"text-align":"left", "cursor":"pointer"}},
];




webix.ready(function()
{
    var activeColumn = null;

    dtable = new webix.ui({
        container: "grid",
        view: "datatable",
        id: "grid",
        hover: "webix-datatable-hover",
        select: "row",
        multiselect: true,
        dragColumn: true,
        drag: true,
        //leftSplit:1,
        resizeColumn: true,
        resizeRow: true,
        navigation: true,
        scrollX: false,
        scrollY: false,
        autoheight: true,
        autoConfig: true,
        editable: true,
        editor: "text",
        url: "ajax.php",
        datafetch:10,
        loadahead:0,
        datathrottle:10,
        columns: columnConfig,
        on: {
            onBeforeLoad:function(){
                this.showOverlay("Loading...");
            },
            onAfterLoad:function(){
                this.hideOverlay();
                calculateGridPageItems('grid');
            },
            onBeforeFilter:function(){
                var activeNode = document.activeElement;
                if (activeNode.tagName == 'INPUT')
                    activeColumn = this.columnId(activeNode.closest('td[column]').getAttribute('column'));
            },
            onAfterFilter:function(){
                if (activeColumn){
                    this.getFilter(activeColumn).focus();
                    var caret = this.getFilter(activeColumn).value.length;
                    // since IE9
                    this.getFilter(activeColumn).setSelectionRange(caret, caret);
                    activeColumn = null;
                }
            }
        },
        pager: {

            template: "{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
            container: "paging",
            size: 10,
            group: 5,on:{
                onAfterPageChange:function(new_page){
                    calculateGridPageItems('grid');
                }
            }
        }


    });


});
function gridPageSizeChange(e, gridId) {
    var grid = $$(gridId);
    grid.getPager().config.size = e.value*1;
    grid.refresh();
    calculateGridPageItems(gridId);
}

function calculateGridPageItems(gridId) {
    var grid = $$(gridId);
    var total = grid.count();
    var visibleRows = grid.getVisibleCount();
    var pageSize = grid.getPager().config.size;
    var pageIndex = grid.getPager().config.page;
    var start = (pageSize * pageIndex)+1;
    var end = start + visibleRows;
    $('#pageStart').html(start);
    $('#pageEnd').html(end);
    $('#pageTotal').html(total);
}

**and json reponse : ** i make it according to this structure

Answer 1

I am not sure what the actual question is here, but if the question is "how to write php backend code for dynamic loading", I could recommend viewing these package samples: https://docs.webix.com/samples/40_serverside/01_php/

Most of the server-side samples are for NodeJs now, you can find them in plenty in the Snippet Tool. There are also a few useful pages in the documentation, e.g. https://docs.webix.com/desktop__plain_dynamic_loading.html

If I am wrong about the question, please be kind to comment, I would be happy to help if I can.