JS Create Table JSON: Display data in a HTML table from JSON server data

Recommend this page to a friend!

Download

Info

Example

Files

Download

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2025-07-09 (Less than 1 hour ago)		Not yet rated by the users				Total: 98		All time: 418 This week: 4

Version		License		JavaScript version		Categories
`createtablejson` 1.0.2		MIT/X Consortium ...		5		HTML, jQuery

Description

Author

Agustin Rios Reyes

This package can display data in a HTML table from JSON server data.

It is a jQuery plugin that can load table data dynamically from a given URL.

The plugin sends an AJAX request to the URL and extracts the row data structure for the table to build from the response returned in JSON.

In Spanish: Parseo de datos con JSON y generaci�n de tabla din�mica HTML con JQuery.

Agustin Rios Reyes

Performance

Level

Name:	Agustin Rios Reyes `<contact>`
Classes:	4 packages by Agustin Rios Reyes
Country:	Mexico
Age:	39
All time rank:	79	2 in Mexico
Week rank:	6	1 in Mexico

Level 2

Innovation award

Nominee: 1x

Example

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Crea Tabla de JSON</title>
	<link rel="stylesheet" type="text/css" href="Tablas.css">
</head>
	<section>
		<div id="contenedorTable1"></div>
		<br>
		<br>
		<br>
		<div id="contenedorTable2"></div>
		<br>
		<br>
		<br>
		<div id="contenedorTable3"></div>
		<br>
		<br>
		<br>
		<div id="contenedorTable4"></div>
		<br>
		<br>
		<br>
		<div id="contenedorTable5"></div>
		<br>
		<br>
		<br>
		<div id="contenedorTable6"></div>
	</section>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="createTableJSON.js"></script>
	<script type="text/javascript">
		$("#contenedorTable1").createTableJSON({url: "Example1.json"});
		$("#contenedorTable2").createTableJSON({url: "Example2.json"});
		$("#contenedorTable3").createTableJSON({url: "Example3.json"});
		$("#contenedorTable4").createTableJSON({url: "Example4.json"});
		$("#contenedorTable5").createTableJSON({url: "Example5.json"});
		$("#contenedorTable6").createTableJSON({url: "Example6.json"});
	</script>
</body>
</html>

Files (11)

File	Role	Description
`createTableJSON.js`	Class	Class source
`Example1.json`	Data	Auxiliary data
`Example2.json`	Data	Auxiliary data
`Example3.json`	Data	Auxiliary data
`Example4.json`	Data	Auxiliary data
`Example5.json`	Data	Auxiliary data
`Example6.json`	Data	Auxiliary data
`index.html`	Example	Example script
`LICENSE`	Example	Example script
`ObjetoTabla.json`	Data	Auxiliary data
`Tablas.css`	Data	Auxiliary data