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