Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

local json file to data

See original GitHub issue

Hi, I am trying attach json file which is located in same folder to the table but table is not visible. I cant find any example for total beginners, can you please help what I am doing wrong? I am using latest tabelator and this simple html page:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link  rel="stylesheet" href="tabulator.min.css">
		<link rel='stylesheet' href='bootstrap.min.css'>
		<script type="text/javascript" src="tabulator.min.js"></script>
	</head>
	<body>	
		<div class='container'>
			<p>Test json loading</p>
			<div id="example-table"></div>
			<!-- ---------------------------------------------------------------- -->
			<script type="text/javascript">				
				$("#example-table").tabulator({
					columns:[
					{title:"#",      field:"id"},
					{title:"Name",   field:"name"},
					{title:"Card ID",   field:"card"},
					{title:"Access", field:"access"},
					],
				});				
				$("#example-table").tabulator("setData", "/users_data.json" );
			</script>
			<!-- -------------------------------------------------------------------- -->
			<p>test</p>
		</div>
	</body>
</html>

json file users_data.json contains these data:

[
        {
		"id": 1,
		"name": "Gustav Haas",
		"card": "1254874",
		"access": "801"
	},
	{
		"id": 2,
		"name": "John Strauss",
		"card": "45ea87a",
		"access": "401"
	},
	{
		"id": 3,
		"name": "Peter Philips",
		"card": "188dabf",
		"access": "301"
	},
	{
		"id": 4,
		"name": "Dan Svensen",
		"card": "eddaf34",
		"access": "101"
	},
]

Thank you very much! pptsk

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

aklavercommented, Jan 3, 2019

Not sure I see that: data:tabledata, //load row data from array

It left to the user to figure out where tabledata is coming from.

1reaction

pptskcommented, Jan 3, 2019

Hi, Finally its works! here full example for other beginners:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link  rel="stylesheet" href="tabulator.min.css">
		<link rel='stylesheet' href='bootstrap.min.css'>
		<script type="text/javascript" src="tabulator.min.js"></script>
		<script type="text/javascript" src="user_data.json"></script> 		
	</head>
	<body>	
		<div class='container'>
			<p>Test json loading</p>	
			<div id="example-table"></div>
			<!-- ---------------------------------------------------------------- -->
			<script type="text/javascript">					
				var local_data = esp_data;  <!-- name inside json file -->	
				var table = new Tabulator("#example-table", {
					data: local_data,
					pagination:"local",
					paginationSize:10,
					layout:"fitColumns",
					placeholder:"No Data Available",								
					columns:[
					{title:"#", formatter:"rownum", align:"center", width:40},
					{title:"Name",   field:"name"},
					{title:"Card ID",   field:"card"},
					{title:"Access", field:"access", sorter:"number"},
					{title:"Del",  width:60 , formatter:"buttonCross", align:"center"},
					{title:"Edit", width:60 , formatter:"buttonTick", align:"center" },
					],					
				});					
			</script>
			<!-- -------------------------------------------------------------------- -->
		</div>
	</div>
</body>
</html>

modified user_data.json

var esp_data = [
        {
		"id": 1,
		"name": "Gustav Haas",
		"card": "1254874",
		"access": "801"
	},
	{
		"id": 2,
		"name": "John Strauss",
		"card": "45ea87a",
		"access": "401"
	},
	{
		"id": 3,
		"name": "Peter Philips",
		"card": "188dabf",
		"access": "301"
	},
	{
		"id": 4,
		"name": "Dan Svensen",
		"card": "eddaf34",
		"access": "101"
	},
]

thank you! pptsk