Responsive table with json data.
How do I make an responsive table with json data.?
You can see json here http://codepen.io/nakome/pen/DnEvr. What is a responsive table with json data.? How do you make a responsive table with json data.? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.
Responsive table with json data. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive table with json data.</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* = body
------------------------*/
body{ background:#1abc9c;
}
.description{ font-family: 'Vollkorn', serif; text-align:center; color:#ecf0f1; text-shadow:0 0.1em 0.2em #008c8d;
}
/* = Scroll body
------------------------*/
::-webkit-scrollbar{ width:0.2em;
}
::-webkit-scrollbar-track{ background-color:#bdc3c7;
}
::-webkit-scrollbar-thumb{ background-color:#7f8c8d;
}
/* = table
------------------------*/
.box-table table{ border-collapse:collapse; text-align:left; width:100%; margin:0; padding:0; background:#7f8c8d; animation: responsive 5s infinite ease-in-out;
}
.box-table{ font:normal 12px/150% Arial, Helvetica, sans-serif; overflow:hidden; margin:0 auto; display:block; width:95%; padding:2.5%;
}
.box-table table thead th{ background-color:#7f8c8d; color:#bdc3c7; text-align:center; padding: 0.75em; font-family: 'Vollkorn', serif; font-weight: bold; font-size: 1.5em; height: 1.5em; vertical-align: top; border-left:0.25em double #95a5a6;
}
.box-table table tbody td,
.box-table table tbody tr{ font-family: 'Vollkorn', serif; font-size:1em; border:none; padding:1em;
}
.box-table table tbody tr:nth-child(odd){ background:#ecf0f1; color:#95a5a6;
}
.box-table table tbody tr:nth-child(even){ background:#bdc3c7; color:#7f8c8d;
}
.box-table table tbody tr a{ text-decoration:none; color:#e67e22;
}
.box-table table tbody tr a:hover{ color:#d35400;
}
.box-table .user-photo{ background:#bdc3c7;
}
.box-table .user-tumb{ width:6em; height:6em; padding:0; display:table-cell; text-align:center; margin:0 auto; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;
}
/* = Responsive table
------------------------*/
/* http://elvery.net/demo/responsive-tables/ */
@media only screen and (max-width: 800px){ .box-table table{ width:100%; border-collapse:collapse; border-spacing:0; } .box-table th, .box-table td{ margin:0; vertical-align:top; } .box-table th{ text-align:left; } .box-table table{ display:block; position:relative; width:100%; } .box-table thead{ display:block; float:left; } .box-table tbody{ display:block; width:auto; position:relative; overflow-x:auto; white-space:nowrap; } .box-table thead tr{ display:block; } .box-table th{ display:block; text-align:right; } .box-table tbody tr{ display:inline-block; vertical-align:top; } .box-table td{ display:block; min-height:1.25em; text-align:left; } .box-table th{ border-bottom:0; border-left:0; } .box-table td{ border-left:0; border-right:0; border-bottom:0; }
}
/* = Error
------------------------*/
.error_table { display: block; background: #E05E5E; color: #D1D1D1; font-family: 'Vollkorn', serif; text-align: center; font-size: 3em; width: 90%; padding: 5%;
}
/* = Loader
------------------------*/
.loading_table{ background:#d35400; color:#ecf0f1; font-family: 'Vollkorn', serif; text-align: center; font-size: 1em; width: 0; display: block; overflow: hidden; height: 1em; padding:0.5em; animation: table_loader 10s infinite ease;
}
@keyframes table_loader{50%{width:100%}}
@-webkit-keyframes table_loader{50%{width:100%}}
@-moz-keyframes table_loader{50%{width:100%}}
@-ms-keyframes table_loader{50%{width:100%}}
@-o-keyframes table_loader{ 50%{width:100%}} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'>
<!-- Description -->
<h1 class="description"> Responsive table with json data.
</h1>
<!-- Table demo -->
<div class="box-table">
<table data-fn="contacts" data-url="http://codepen.io/nakome/pen/DnEvr.js"></table>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive table with json data. - Script Codes CSS Codes
/* = body
------------------------*/
body{ background:#1abc9c;
}
.description{ font-family: 'Vollkorn', serif; text-align:center; color:#ecf0f1; text-shadow:0 0.1em 0.2em #008c8d;
}
/* = Scroll body
------------------------*/
::-webkit-scrollbar{ width:0.2em;
}
::-webkit-scrollbar-track{ background-color:#bdc3c7;
}
::-webkit-scrollbar-thumb{ background-color:#7f8c8d;
}
/* = table
------------------------*/
.box-table table{ border-collapse:collapse; text-align:left; width:100%; margin:0; padding:0; background:#7f8c8d; animation: responsive 5s infinite ease-in-out;
}
.box-table{ font:normal 12px/150% Arial, Helvetica, sans-serif; overflow:hidden; margin:0 auto; display:block; width:95%; padding:2.5%;
}
.box-table table thead th{ background-color:#7f8c8d; color:#bdc3c7; text-align:center; padding: 0.75em; font-family: 'Vollkorn', serif; font-weight: bold; font-size: 1.5em; height: 1.5em; vertical-align: top; border-left:0.25em double #95a5a6;
}
.box-table table tbody td,
.box-table table tbody tr{ font-family: 'Vollkorn', serif; font-size:1em; border:none; padding:1em;
}
.box-table table tbody tr:nth-child(odd){ background:#ecf0f1; color:#95a5a6;
}
.box-table table tbody tr:nth-child(even){ background:#bdc3c7; color:#7f8c8d;
}
.box-table table tbody tr a{ text-decoration:none; color:#e67e22;
}
.box-table table tbody tr a:hover{ color:#d35400;
}
.box-table .user-photo{ background:#bdc3c7;
}
.box-table .user-tumb{ width:6em; height:6em; padding:0; display:table-cell; text-align:center; margin:0 auto; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;
}
/* = Responsive table
------------------------*/
/* http://elvery.net/demo/responsive-tables/ */
@media only screen and (max-width: 800px){ .box-table table{ width:100%; border-collapse:collapse; border-spacing:0; } .box-table th, .box-table td{ margin:0; vertical-align:top; } .box-table th{ text-align:left; } .box-table table{ display:block; position:relative; width:100%; } .box-table thead{ display:block; float:left; } .box-table tbody{ display:block; width:auto; position:relative; overflow-x:auto; white-space:nowrap; } .box-table thead tr{ display:block; } .box-table th{ display:block; text-align:right; } .box-table tbody tr{ display:inline-block; vertical-align:top; } .box-table td{ display:block; min-height:1.25em; text-align:left; } .box-table th{ border-bottom:0; border-left:0; } .box-table td{ border-left:0; border-right:0; border-bottom:0; }
}
/* = Error
------------------------*/
.error_table { display: block; background: #E05E5E; color: #D1D1D1; font-family: 'Vollkorn', serif; text-align: center; font-size: 3em; width: 90%; padding: 5%;
}
/* = Loader
------------------------*/
.loading_table{ background:#d35400; color:#ecf0f1; font-family: 'Vollkorn', serif; text-align: center; font-size: 1em; width: 0; display: block; overflow: hidden; height: 1em; padding:0.5em; animation: table_loader 10s infinite ease;
}
@keyframes table_loader{50%{width:100%}}
@-webkit-keyframes table_loader{50%{width:100%}}
@-moz-keyframes table_loader{50%{width:100%}}
@-ms-keyframes table_loader{50%{width:100%}}
@-o-keyframes table_loader{ 50%{width:100%}}
Responsive table with json data. - Script Codes JS Codes
// Demo json loaded from dropbox
// Data = http://codepen.io/nakome/pen/DnEvr.js
//[
// {
// "photo":"image url ",
// "name":"Jhon",
// "last":"Smith",
// "email":"[email protected]",
// "phone":"1-555-222-333",
// "web":"http://jhonSmith.com"
// },
// {
// "photo":"image url",
// "name":"Carla",
// "last":"Doe",
// "email":"[email protected]",
// "phone":"1-333-111-555",
// "web":"http://carladoe.com"
// }
// ]
(function(){ 'use-strict'; var elem, // data-fn dataFn = $('[data-fn="contacts"]'), // data-url thisUrl = dataFn.data('url'); if (typeof $.table_of_contacts == 'undefined') $.table_of_contacts = {}; $.table_of_contacts.get = { init: function() { if(dataFn){ this.getJson(); }else{ dataFn.html('No data found.'); } }, /* = Get data ------------------------*/ getJson: function(url){ var self = this; // loading data before dataFn.html('<span class="loading_table">'+ 'Loading Please Wait ....'+ '</span>'); // No ajax cache $.ajaxSetup({ cache: false }); // Get json $.getJSON(thisUrl,function(data){ // load template var out_html = self.tpl(); $.each(data,function(i,obj){ // load inner template out_html += self.tpl_inner(obj); }); // close tag out_html += '</tbody>'; // render templates dataFn.html(out_html); // error }).error(function(j,t,e){ // render error. dataFn.html('<span class="error_table">'+ 'Error = '+e+ '</span>'); }); }, // head table template tpl: function(){ var html = '<thead>'+ '<tr>'+ '<th>Photo</th>'+ '<th>Name</th>'+ '<th>Last Name</th>'+ '<th>Email</th>'+ '<th>Phone</th>'+ '<th>Web</th>'+ '</tr>'+ '</thead>'+ '<tbody >'; return html; }, // inner template tpl_inner: function(obj){ var html= '<tr>'+ '<td class="user-photo">'+ '<img class="user-tumb" src="'+obj.photo+'"/>'+ '</td>'+ '<td>'+obj.name+'</td>'+ '<td>'+obj.last+'</td>'+ '<td>'+obj.email+'</td>'+ '<td>'+obj.phone+'</td>'+ '<td>'+ '<a href="'+obj.web+'" title="'+ obj.name + ' ' + obj.last+'">'+ obj.web + '</td>'+ '</tr>'; return html; } }; // on ready render data $(document).ready(function() { $.table_of_contacts.get.init(); });
})().call(this);
Developer | Moncho Varela |
Username | nakome |
Uploaded | July 07, 2022 |
Rating | 4.5 |
Size | 4,802 Kb |
Views | 97,152 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Css3 slide | 3,190 Kb |
Data uri converter | 4,979 Kb |
A Pen by Moncho Varela | 7,581 Kb |
Captcha Colors experiment | 4,057 Kb |
Gallery with list style | 5,160 Kb |
Html demos with data uri | 4,086 Kb |
Welcome | 6,076 Kb |
Simple Calendar with json events | 4,127 Kb |
Another webSQL | 6,565 Kb |
Calendar with json events mobile concept | 4,022 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Twitch | SarahDunlap | 2,937 Kb |
Clock | Martingrand | 3,520 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!