Skip to content

Instantly share code, notes, and snippets.

@dubeyji10

dubeyji10/index.css

Created July 22, 2022 08:35
Show Gist options
  • Save dubeyji10/84a40aad4a7443aac29e16d198d46c4f to your computer and use it in GitHub Desktop.
Save dubeyji10/84a40aad4a7443aac29e16d198d46c4f to your computer and use it in GitHub Desktop.
Download ZIP
Using jquery plugin to populate tables from a json response
Raw
index.css
.b1{
background-color: salmon;
}
.wrapper{
padding: 10px 10px 10px 10px;
/* margin: 20px 20px 50px 50px; */
margin-left: 50px;
margin-right: 50px;
display: grid;
/* grid-template-rows: 1fr 5fr 1fr; */
/* grid-template-rows: 10% 80% 10%; */
grid-row-gap:0.51em;
/* justify-content: center; */
align-content: center;
}
#header{
display:flex;
/* align-items: center; */
/* justify-content: center; */
justify-content:space-around;
/* justify-content:space-evenly; */
font-size: 2em;
/* background-color: rgb(255, 246, 124); */
background: linear-gradient(-45deg,rgb(202, 175, 202),rgb(182, 250, 227),rgb(250, 180, 237));
overflow-x:visible;
}
#header div{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
}
#header div img{
height: 20px;
width: 30px;
background-color: aliceblue;
}
#header a{
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
}
#body{
/* background-color: rgb(174, 248, 202); */
background-color: rgb(252, 252, 209);
display: grid;
justify-items: center;
padding-bottom: 10%;
}
#B1{
display: grid;
background-color: rgb(139, 150, 156);
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
font-size: smaller;
justify-content: center;
align-items: center;
}
.b2{
background-color: palegoldenrod;
}
#B1 div:nth-child(2) {
/* background-color: #a6f3f3; */
font-size: 2em;
text-align: center;
}
#B2{
background-color: rgb(120, 247, 194);
padding-top: 50px;
margin-top: 50px;
padding-bottom: 50px;
margin-bottom: 50px;
text-align: center;
}
#B3{
background-color: rgb(228, 253, 114);
/* max-width: max-content; */
/* justify-content: space-evenly; */
justify-content: center;
}
#B3 div{
display: flex;
justify-content: space-evenly;
background-color: rgb(245, 175, 135);
align-items: flex-end;
height: min-content;
}
#B6{
background-color: rgb(245, 222, 168);
font-size: smaller;
}
/* column-count: 2; */
ul {
padding-top: 2%;
justify-content: center;
-webkit-columns: 5;
-moz-columns: 5;
columns: 3;
-moz-column-count: 10;
/* max-width: 80%; */
}
ul li {
list-style-position: inside;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
/* text-transform: uppercase; */
text-align: center;
font-size: larger;
/* width: 33%; */
}
.li2{
font-size: larger;
}
#tableData{
background-color: rgb(250, 215, 149);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 1%;
padding-right: 1%;
/* margin-left: 2%; */
/* margin-right: 2%; */
}
th{
background-color: bisque;
}
tr{
font-size: smaller;
}
.listItems{
display: grid;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
justify-items: center;
/* grid-auto-rows: minmax(100px, auto); */
/* grid-auto-rows: 250px; */
}
/* #listItems div {
color: aliceblue;
font-size: 2rem;
border-left: 1px seagreen solid;
border-right: 1px rgb(5, 3, 7) solid;
padding-bottom: 10%;
}
*/
.listItems div {
height: fit-content;
text-align: center;
}
Raw
index.html
<!doctype html>
<html>
<head>
<title> Homepage </title>
<link href="{{ url_for('static', filename='index.css') }}" rel="stylesheet">
<!-- for json to tables -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.22/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.22/datatables.min.js"></script>
<!-- -->
</head>
<!-- list of distinct topics which could filter the dataset -->
<!-- fun8 returns the distinct topics -->
<body>
<div class="wrapper">
<div id="header" >
<!-- removed some items from fields
just comment out or remove that line to create filters on them -->
<!-- working on filters -->
{% for field in fields %}
<div>
<a target="_blank" href = {{ url_for('distinctFor' , name = field ) }} > {{ field }} </a>
<a target="_blank" href = {{ url_for('chartFor' , key = field ) }} >
<img alt="icon" src="{{ url_for('static', filename = 'line-chart.png') }}"/>
</a>
</div>
{% endfor %}
</div>
<div id="body">
<div id="B1">
<h2> Land Records are displayed below </h2>
</div>
<script>
$( document ).ready(function() {
getDataForDatatables();
});
function getDataForDatatables(){
var jsonData = {
"data" : {{ data|tojson }}
};
setDataToTable(jsonData);
}
function setDataToTable(jsonData){
console.log("__________2__________");
console.log(jsonData);
console.log("\n\n ......................... 2 ......................... \n\n");
$('#tableTopic').DataTable( {
pagination: "bootstrap",
filter:true,
data: jsonData.data,
destroy: true,
lengthMenu:[25,10],
pageLength: 10,
"columns":[
{ "data" : "address" },
{ "data" : "owner" },
{ "data" : "commune" },
{ "data" : "category" },
{ "data" : "type" },
{ "data" : "area1" },
{ "data" : "area2" },
{ "data" : "totalarea" },
{
"data" : "date" ,
"render": function (data) {
if (data!=null){
let myDate = data;
newDate = data.slice(0,10);
return newDate;
}
else{
return null;
}
}
}
]
} );
}
</script>
<div id="tableData">
<table id="tableTopic" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Address</th>
<th>Owner</th>
<th>Commune</th>
<th>Category</th>
<th>Type</th>
<th>Area 1</th>
<th>Area 2</th>
<th>Total Area</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment