How to get all row values tabulator?

问题: 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 im try is: $(document)....

问题:

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 im try 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"); shows TypeError: $(...).tabulator is not a function

when using: var data = $('#example-table').getData(); shows TypeError: $(...).getData is not a function

When i try define the table using this method:

$("#example-table").tabulator({ //table setup options }); it's show nothing (blank).

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

You can try in jsfiddle too, check here


回答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 table var which you created above.

Hope this helps. Thanks!

  • 发表于 2019-01-22 15:05
  • 阅读 ( 602 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除