CODEWITHSUNDEEP
tabulator
Dima Opiums
Dima Opiums

Reputation: 9

How load columns via ajax in tabulator

I am trying to load columns in a tabulator 4.5 using the following:

var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:getColumns,
});

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

But I get the error:

tabulator.min.js:4 Uncaught TypeError: this.options.columns.slice is not a function
    at t.u._clearObjectPointers (tabulator.min.js:4)
    at t.u._create (tabulator.min.js:4)
    at new t (tabulator.min.js:4)
    at (index):84

Tell me please, how can I load columns into a tabulator via ajax?

Upvotes: 0

Views: 735

Answers (1)

nrayburn-tech
nrayburn-tech

Reputation: 968

You cannot pass an async function into the columns parameter. It expects an array of columns.

So instead of passing getColumns into the columns option, you should get the value from getColumns and then pass that into the Tabulator options.

I re-arranged your code some, I believe this should work.

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

getColumns().then((columns) => {
  var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:columns,
  });
});

Upvotes: 1

Related Questions