Multiple datatables on a page with pagers, only the first pager is working

Hi,

I have a web page with multiple tabs. Each tab has an instance of a datatable, which works as expected. The issue is that only the first datatable has the pager controls at the bottom.

Here is an example of one datatable, the others are the same except container and pager:container are targeting different div’s.

function ShowGroupGrid() {
            groupgrid = webix.ui({
                container:"groupTable",
                view:"datatable", 
                id:"groupgrid",
                margin:5,
                css:"webix_header_border webix_data_border",
                columns:[
                    //{ id:"id",	        header:["ID",               {content:"textFilter"}],    width:150,  sort:"int"},
                    { id:"domain",	        header:["Domain",           {content:"selectFilter"}],  width:185,  sort:"string"},
                    { id:"canonicalname",	header:["Canonical Name",   {content:"textFilter"}], 	width:150,  sort:"string"},
                    { id:"samaccountname",	header:["samAccountName",   {content:"textFilter"}], 	width:200,  sort:"string"},
                    { id:"description",	    header:["Description",      {content:"textFilter"}], 	width:200,  sort:"string"},
                    { id:"category",	    header:["Category",         {content:"textFilter"}], 	width:100,  sort:"string"},
                    { id:"scope",	        header:["Scope",            {content:"textFilter"}], 	width:175,  sort:"string"},
                    { id:"distinguishedname",header:["Distinguished Name",{content:"textFilter"}], 	width:200,  sort:"string"},
                    //{ id:"enabled",	    header:["Enabled",          {content:"textFilter"}], 	width:100,  sort:"string"},
                    { id:"created",	        header:["Created",          {content:"textFilter"}], 	width:200,  sort:"string"},
                    { id:"modified",	    header:["Modified",         {content:"textFilter"}], 	width:200,  sort:"string"}
                ],
                autoheight:true,
                resizeColumn:true,
                select:"row",
                hover:"myhover",
                scrollY:true,
                scrollX:true,
                navigation:"true",
                url:"ajax/modules/ent/ajax_ent_getgroupdata.php",
                pager:{
                    template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
                    container:"groupTable_Paging",
                    size:10,
                    group:5
                },
               
            });	
        }   // End of ShowGroupGrid

Hi @dmcconnell68 ,

others are the same except container and pager:container are targeting different div’s.

Could you please check if the IDs of each table (id:"groupgrid",) are duplicated as well?
ID is the main locator of each Webix component on a page, so in order to avoid any conflict, it should not be repeated by another view that exists at the same time on a page.

Hi @Listopad,

Yes, each one is different. Here are excerpts from each Webix datatable:

jobqueuegrid = webix.ui({
container:“jobqueueTable”,
view:“datatable”,
id:“jobqueuegrid”,

usergrid = webix.ui({
container:“userTable”,
view:“datatable”,
id:“usergrid”,

groupgrid = webix.ui({
container:“groupTable”,
view:“datatable”,
id:“groupgrid”,

Thanks,
David