Tabulator: $(...).tabulator is not a function

[diffcultpro]

below is the codes. i have loaded tabulator.js and the other css or js ,and i am sure all the paths are right. i need help as soon as possible .thanks @.

<script src="${ctx}/IF1580/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="${ctx}/IF1580/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="${ctx}/IF1580/tabulator-master/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/IF1580/tabulator-master/dist/js/tabulator.min.js"></script>`
`$("#example-table").tabulator({
        height:205, // set height of table
        fitColumns:true, //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            {title:"Name", field:"name", width:150},
            {title:"Age", field:"age", align:"left", formatter:"progress"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        ],
        rowClick:function(e, row){ //trigger an alert message when the row is clicked
            alert("Row " + row.getData().id + " Clicked!!!!");
        }
    });
    var tabledata = [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
    ];

//load sample data into the table
    $("#example-table").tabulator("setData", tabledata);`

[olifolkerd]

the order looks right,

have you checked to make sure the contents of the included files is correct, also are you getting any other errors in your console before the tabulator issue?

Cheers

Oli

[diffcultpro]

i have resolved this problem，but now, i have anther question just like this .
i have set the "groupBy" , but it doesn't make difference and there is no errors in the console , i just write as the documents . or i loaded the wrong css style ? i want the effect like the example .thank u .
below is the one part of the js code .
$("#example-table").tabulator({ height:"311px", fitColumns:true, groupBy:"gender", pagination :"local",
<script src="${ctx}/IF1580/tabulator/js/jquery-ui-11.4/jquery-ui.min.js" type="text/javascript" ></script> <link rel="stylesheet" href="${ctx}/IF1580/tabulator/tabulator-master/dist/css/bootstrap/tabulator_bootstrap.min.css"> <link rel='stylesheet' href="${ctx}/IF1580/tabulator/tabulator-master/dist/css/tabulator_site.css"> <script type="text/javascript" src="${ctx}/IF1580/tabulator/js/tabulator.js"></script>

[diffcultpro]

ok . i have resolved this problem .haha... i didn't load the newest tabulator.js .

[sach3000]

with tabulator.js ( Tabulator v4.0.2)
$("#tb-result").tabulator({
rowClick:function(e, row){
alert(row.index)
},
});

i have error:
TypeError: $(...).tabulator is not a function

How i can get row index ?

---

Thaks.

[olifolkerd]

Hey @diffcultpro

Have you included the jquery_wrapper.js after your tabulator.js, this is now required if you wish to use jQuery with Tabulator version 4.0 and up.

Have a read of the jQuery Wrapper Documentation for more information.

Cheers

Oli :)

[sach3000]

@olifolkerd, tell me please
How i can get rowIndex (selected) from external button click ? and manipulate data in row set
this tabulator part:

var tb = new Tabulator("#tb-result", { layout:"fitColumns", rowDblClick:function(e, row){ var rowIndex = row.getIndex(); row.toggleSelect(); var cells = row.getCells(); var rowData = row.getData(); },
This click function on button:
$("#delete").on("click", function(){ });
Thanx

[olifolkerd]

Hey @sach3000

Please ask general questions in stack overflow, this issues list is reserved for bug reports and feature requests.

Please be specific about what you are trying to achieve when you post there, what action are you looking to take on the row, are you looking to delete the selected rows?

Cheers

Oli :)

[sach3000]

https://github.com/olifolkerd/tabulator/issues/745

helpfull link.

[sach3000]

thanx Oli, great product

[themantalope]

Hi everyone,

I'm also getting this error. I've just started using the library so it's likely I have made a configuration error. Here is the HTML document header:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
  <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" 
    integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
    crossorigin="anonymous">
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static',filename='js/ps.js') }}"></script>


</head>
<body>
...
</body>
</html>

The code for setting up the example table is then on the ps.js file I serve. Here is the code for that file:

$(document).ready(function(){

    //define some sample data
    var tabledata = [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
    ];

    var table = new Tabulator("#example-table", {
        height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            {title:"Name", field:"name", width:150},
            {title:"Age", field:"age", align:"left", formatter:"progress"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        ],
        rowClick:function(e, row){ //trigger an alert message when the row is clicked
            alert("Row " + row.getData().id + " Clicked!!!!");
        },
        addRowPos:"bottom"
   });

    $("#add-row").click(function(){
        $("#example-table").tabulator("addRow", {}, true);
    });
});

The page then renders the example table as expected. However, when I click on the #add-row button (latest Firefox browser) I get the error TypeError: $(...).tabulator is not a function. I'm not sure what's causing this and seems like the code is congruent with the documentation. I've included both jquery and jquery-ui in the html head. Based on my understanding, I shouldn't require the jquery wrapper. Please let me know if something is missing. Thanks!

edit: grammar changes for clarity

[borderstep]

Hi everyone,

I'm also getting this error. I've just started using the library so it's likely I have made a configuration error. Here is the HTML document header:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
  <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" 
    integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
    crossorigin="anonymous">
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static',filename='js/ps.js') }}"></script>


</head>
<body>
...
</body>
</html>

The code for setting up the example table is then on the ps.js file I serve. Here is the code for that file:

$(document).ready(function(){

    //define some sample data
    var tabledata = [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
    ];

    var table = new Tabulator("#example-table", {
        height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            {title:"Name", field:"name", width:150},
            {title:"Age", field:"age", align:"left", formatter:"progress"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        ],
        rowClick:function(e, row){ //trigger an alert message when the row is clicked
            alert("Row " + row.getData().id + " Clicked!!!!");
        },
        addRowPos:"bottom"
   });

    $("#add-row").click(function(){
        $("#example-table").tabulator("addRow", {}, true);
    });
});

The page then renders the example table as expected. However, when I click on the #add-row button (latest Firefox browser) I get the error TypeError: $(...).tabulator is not a function. I'm not sure what's causing this and seems like the code is congruent with the documentation. I've included both jquery and jquery-ui in the html head. Based on my understanding, I shouldn't require the jquery wrapper. Please let me know if something is missing. Thanks!

edit: grammar changes for clarity

Did you find a solution?

[takuy]

@themantalope @borderstep
This is happening because Tabulator is no longer is jquery-based.

You'll want to change your jquery-based functions to the new style.

See doc page for the changes: http://tabulator.info/docs/4.0/upgrade#jquery

Where you used something like $("#example-table").tabulator("getRow", 1);

You should change it to: table.getRow(1);;

[borderstep]

@themantalope @borderstep
This is happening because Tabulator is no longer is jquery-based.

You'll want to change your jquery-based functions to the new style.

See doc page for the changes: http://tabulator.info/docs/4.0/upgrade#jquery

Where you used something like $("#example-table").tabulator("getRow", 1);

You should change it to: table.getRow(1);;

You, Sir, are a gentleman and a scholar.

[themantalope]

@borderstep @takuy

Sorry I did not get back to you earlier.

Yes, as @takuy states, Tabulator no longer uses jQuery to select elements. I have indeed solved it by referring the to JS object created when I made the tables. I was probably looking at old versions of the documentation, which google sometimes like to rank higher than the latest version. You can switch versions of the documentation in the upper left dropdown menu on any of the documentation pages.

[ayman-metwally-developer]

Greetings,

But I wonder how to dynamically get all defined tables from HTML. It seems that getElementById doesn't return the table also.

I can't use the table variable directly as I add/remove tables dynamically and will need to loop through all tables. (I'm using GridStack which is a dynamic dashboard that can contain any type of components like charts, grids .. etc.). the user is able to add as many tables as required, and I need a dynamic way to loop through all these tables.

Any suggestions?