Issue
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
Solution
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();
Answered By - Oli Folkerd Answer Checked By - Willingham (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.