I am wanting to take a dataframe and put it to a bootstrap table that is searchable. Right now I have this:
tester.html
<!DOCTYPE html>
<html lang="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/df_style.css') }}">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
</head>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<table id="myTable">
<h1>
<!--Displaying the converted table-->
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</h1>
</table>
</div>
</body>
app.py
from app import app
from flask import Flask, render_template
#app.route("/")
def eod_coin():
return render_template('tester.html', tables=[eod.to_html()], titles=[''])
I have looked at the following How to make bootstrap-table-filter-control work with Flask, Jinja and Dataframe but can't seem to get the search function to work when I want to pass in a df and not building the data in my app.py
Related
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ static 'images/logo.png' }}" alt="Company Logo">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
-->
</body>
</html>
when including the static files in the Django-jinja template it shows an error. If I removed that line It worked. But I want to load my static files in jinja template.
First you have to load static at top of your html page
{% load static %}
Then you have to use {% %} instead of {{ }}
<link rel="icon" href="{% static 'images/logo.png' %}" alt="Company Logo">
you need to add {% load static %} first
I'm having some problem with my multiples stylesheet references. Basically the classes defined on style.css are not acting on my index.html. Might be that as there are multiple stylesheet someone of these are overwriting the file style.css?
Last time I was having a similar problem and I asked a question here but after a couple of hours the file was working fine... Now I have restarted and all but still style.css still do nothing...
myapp/static/style.css
h1 {
color: blue;
text-align: center;
}
.box {
width:30%;
height:30%;
background-color: blue;
}
On my layout.html have been defined multiples stylesheet references on the following way
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<!-- Estilos de la master -->
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css" >
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"
type="text/css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'js/sss/sss.css' %}" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Estilos de los recursos adicionales -->
<link rel="stylesheet" href="{% static 'fontawesome/web-fonts-with-css/css/fontawesome-
all.min.css' %}">
<!-- LibrerÃas adicionales -->
<script src="{% static 'js/jquery.min.js'%}"></script>
<script src="{% static 'js/sss/sss.min.js' %}"></script>
<!-- LibrerÃas de plugins -->
<!-- Archivo personalizado de Javascript -->
<script src=" {% static 'js/codejs.js' %}"></script>
<title>{% block title %}{% endblock %}</title>
</head>
and finally my index.html:
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<h1> Hola Mundo</h1>
<div class="box">Hello world1</div>
<div style="width:30%; height:30%; background-color: red;">Hello world2</div>
{% endblock %}
Django csrf_token error, while I wrote it in my HTML file, but why does this error message poped up when I wrote that csrf_token?
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
{% block content %}
<div id="wrapper">
<form method="POST" action="">{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</div>
</form>
</div>
{% endblock %}
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
paste this code and try again ->
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
<div id="wrapper">
<form method="POST">
{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</form>
</div>
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.
Using Master/Details Example on pluker
http://plnkr.co/edit/CncDWCktXTuBQdDVfuVv?p=preview
I copied everthing local file and just launching the html
in firefox and chrome. Everything works.
But when I try to server the page via a Flask python server. I
dont see selection in html as output. It looks like that {{ ?? }}
in not showing up....
app.py: trimmed down flask app
from flask import Flask, render_template, request, json, Response
app = Flask(__name__)
DEBUG = True
#app.route("/index", methods=['GET', 'POST'])
def selected_version():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
The index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="../static/js/newAppMain.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems"> {{mySelections}} </div>
</body>
</html>
The view Source of index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="../static/js/newAppMain.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems"></div>
</body>
</html>