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

Tagged:

Comments

  • 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.

  • edited February 24

    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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!