JSON file
Preface
The simplest way to load data from server is file on server.File
First of all you need file on server.Let us do file
staff.json with following content.
{
"data": [
{"id": 1, "name": "Taylor", "surname": "Davis", "country": "Netherlands", "position": "DevOps", "email": "taylor.davis@fancygrid.com"},
{"id": 2, "name": "Isabella", "surname": "Scott", "country": "Australia", "position": "PHP Developer", "email": "isabella.scott@fancygrid.com"}
{"id": 3, "name": "Chloe", "surname": "Woods", "country": "Sweden", "position": "C++ Developer", "email": "chloe.woods@fancygrid.com"}
{"id": 4, "name": "Ivan", "surname": "Richardson", "country": "Singapore", "position": "C++ Developer", "email": "ivan.richardson@fancygrid.com"}
{"id": 5, "name": "Ivan", "surname": "Brown", "country": "Taiwan", "position": "Data Science Engineer", "email": "ivan.brown@fancygrid.com"}
{"id": 6, "name": "Ella", "surname": "Brown", "country": "Sweden", "position": "ASP.NET Developer", "email": "ella.brown@fancygrid.com"},
{"id": 7, "name": "Elizabeth", "surname": "Scott", "country": "USA", "position": "iOS Developer", "email": "elizabeth.scott@fancygrid.com"},
{"id": 8, "name": "Peter", "surname": "Johnson", "country": "Taiwan", "position": "C++ Developer", "email": "peter.johnson@fancygrid.com"},
{"id": 9, "name": "Randy", "surname": "Martin", "country": "Netherlands", "position": "C++ Developer", "email": "randy.martin@fancygrid.com"},
{"id": 10, "name": "Michael", "surname": "Phillips", "country": "UK", "position": "Software Tester", "email": "michael.phillips@fancygrid.com"},
{"id": 11, "name": "Ed", "surname": "Brown", "country": "San Marino", "position": "Python Developer", "email": "ed.brown@fancygrid.com"},
{"id": 12, "name": "Luis", "surname": "Richardson", "country": "Netherlands", "position": "Software Tester", "email": "luis.richardson@fancygrid.com"},
{"id": 13, "name": "Ed", "surname": "Johnson", "country": "Australia", "position": "ASP.NET Developer", "email": "ed.johnson@fancygrid.com"},
{"id": 14, "name": "Gavin", "surname": "Garcia", "country": "Belgium", "position": "DevOps", "email": "gavin.garcia@fancygrid.com"},
{"id": 15, "name": "Taylor", "surname": "Howard", "country": "Taiwan", "position": "JavaScript Developer", "email": "taylor.howard@fancygrid.com"},
{"id": 16, "name": "Orlando", "surname": "Scott", "country": "Ireland", "position": "Frontend Developer", "email": "orlando.scott@fancygrid.com"},
{"id": 17, "name": "Chloe", "surname": "Taylor", "country": "Finland", "position": "Java Developer", "email": "chloe.taylor@fancygrid.com"},
{"id": 18, "name": "Jacob", "surname": "Hill", "country": "Japan", "position": "Python Developer", "email": "jacob.hill@fancygrid.com"},
{"id": 19, "name": "Paula", "surname": "Scott", "country": "Netherlands", "position": "Data Science Engineer", "email": "paula.scott@fancygrid.com"},
{"id": 20, "name": "Lily", "surname": "Miller", "country": "Austria", "position": "JavaScript Developer", "email": "lily.miller@fancygrid.com"}
]
}
Client side code
Let's prepare HTML and js code
<html>
<head>
<link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
width: 550,
height: 500,
data: {
proxy: {
url: 'staff.json'
}
},
selModel: 'cell',
cellTrackOver: true,
defaults: {
resizable: true,
sortable: true,
draggable: true
},
columns: [{
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'SurName'
}, {
index: 'country',
title: 'Country'
}, {
index: 'position',
title: 'Position'
}, {
index: 'email',
title: 'Email'
}]
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>