How to get all row values tabulator?

Question

I have editable table using tabulator.

Everything is ok, but the problem is I can't get all row value when click "save button"

What I'm trying is:

$(document).ready(function() {
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,
  data:tabledata,
  layout:"fitColumns",
  columns:[
   {title:"Name", field:"name", width:150},
   {title:"Age", field:"age", visible: false},
   {title:"Favourite Color", field:"col"},
   {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
  ],
  footerElement:"<button id='save' class='pull-left' title='Save'>Save</button> ",
});

 $(document).on("click", "#save", function(){
   /* var data = $("#example-table").tabulator("getData"); */
   var data = $('#example-table').getData();
        console.log('save clicked');
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.1.5/js/jquery_wrapper.js"></script>


<div id="example-table"></div>

When running it shows error

TypeError: $.widget is not a function

When I try using:

var data = $("#example-table").tabulator("getData");

I get this error:

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

when using:

var data = $('#example-table').getData();

the error is:

TypeError: $(...).getData is not a function

When I try to define the table using this method:

$("#example-table").tabulator({ //table setup options });

it's not showing anything (blank).

Can someone tell me what's wrong? Or give me the reference how to get all row values?

You can try in jsfiddle too, check here

you can check again sir, forget to update, sorry @PrashantZombade — dianeryanto, Jan 21 '19 at 09:29

score 10 · Accepted Answer · edited Jan 06 '21 at 11:42

Update for version 4.5+:

In version 4.5+ there is a function that lets you find the table with a query selector when the table variable is not accessible. http://tabulator.info/docs/4.6/options#find-table

const table = Tabulator.prototype.findTable('#example-table')[0];
const data = table.getData();

Original answer:

The issue is because you are declaring the table variable inside a function, so its scope is limited.

If you declare it in the global scope, and then assign it inside the function it will then be accessible everywhere.

//global scope
var table

//assign inside table - notice no "var"
function generateGrid(){
    table = new Tabulator("#example-table", { ....
}

//you can then use it everywhere
var data = table.getData();

This solves the global problem I was having. I was redeclaring table variable every time. Oli, we love you! — pankaj, Oct 15 '19 at 09:24

score 1 · Answer 2 · edited Jan 14 '20 at 17:52

1

Instead of, var data = $('#example-table').getData();

Use, var data = table.getData();

what you are doing is chaining getData() on jQuery function but you have to implement getData() on Tabulator table instance which is var table which you created above.

Hope this helps. Thanks!

edited Jan 14 '20 at 17:52

ata

3,398
5
20
31

answered Jan 21 '19 at 09:58

Gaurav Rawal

57
1
5

You are using the new 4.0 method of instantiating the table, which does not use jQuery which is why you cant access it by selector later on – Oli Folkerd Jan 21 '19 at 22:44
Your answer is work, but my problem is i'm declare my table inside function like [this](http://jsfiddle.net/dianeryanto/06dj9h8g/), can you tell me how to get value when im declare the table inside function?? cc: @OliFolkerd – dianeryanto Jan 22 '19 at 01:41

score 1 · Answer 3 · answered Jan 24 '19 at 01:17

Based on my last comment who declared the table inside function.

This is my way to get specific value when click save button

$(document).ready(function() {

function generateGrid(){
  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,
     data:tabledata,
     layout:"fitColumns",
     columns:[
       {title:"Name", field:"name", width:150},
       {title:"Age", field:"age", visible: false},
       {title:"Favourite Color", field:"col", editor:"input", formatter:
         function (row, formatterParams){
            let rowId = row.getData().id;
            let color = row.getData().col;
            
            return '<input type="text" class="txtAU" name="txtAU" id="txtAU'+rowId+'" value="' + color +'"/>';
            }
       },
       {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
     ],
     footerElement:"<button id='save' class='pull-left' title='Save'>Save</button> ",
});
}
 
  $(document).on("click", "#view", function(){
   generateGrid();
   $('#example-table').show();
  });
  
 $(document).on("click", "#save", function(){
  
    var data_ = "";
    var i = 1;
    $("input[name='txtAU']").each(function(){
        data_=data_+$(this).val()+";";
        i++;
    });
    console.log(data_);
    console.log('save clicked');
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>



<button id='view' class='pull-left' title='Save'>Show Table</button> 

<div id="example-table" style="display:none"></div>

And if you looking get the all value and declared table like usually, you can use

var data = table.getData();

like Gaurav's answer. Thankyou, hope this help someone.

How to get all row values tabulator?

3 Answers3

Linked