Tabulator.js 通过 id 的可访问性不起作用

Question

The accessibility of a Tabulator Table by a global variable works fine, but i can't realy use global Variables, because i'm dynamically generating new Tables.

I just want to access the Tabels by their Container ID.

The code below shows accessability by global variable "table" and by ID, which is provided by the examples ( http://tabulator.info/examples/4.3#adddel ), but does not work.

See my JSFiddle example of this: https://jsfiddle.net/vs43re6p/41/

$('#button').click(function() {
    table.addRow({});
});

$('#button2').click(function() {
    $("#example-table").tabulator("addRow", {});
});

What am i doing wrong?

Answer 1

If you want to use jQuery selection you need to have the Tabulator jQuery wrapper installed:

http://tabulator.info/docs/4.3/install#setup-jquery

Answer 2

Maybe something like this...

$('#button2').click(function() {
    const table = new Tabulator("#example-table");
    table.addRow({});
});

or

(function() {
    const table = new Tabulator("#example-table");

    $('#button2').click(function() {
        table.addRow({});
    });
})();

Answer 3

As long as you are using Tabulator 4.5 or above you can lookup a table by the element ID by using the findTable function on the Tabulator prototype

var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table

The findTable function will return an array of matching tables. If no match is found it will return false

Full details can be found in the Options Documentation