I'm trying to add a background color to even rows in a table in HTML.
I'm using xhtml2pdf to convert the html to pdf to serve with a django backend.
The styles on the even rows don't seem to be working
<html>
<head>
<style type="text/css">
tr:nth-child(even) {
background-color: blue;
}
</style>
</head>
<body>
<main>
<table>
<thead>
<tr>
<th>Heading/th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
{% for result in data.results %}
<tr>
<td>{{result}}</td>
<td>{{result}}</td>
<td>{{result}}</td>
</tr>
{% endfor %}
</table>
</main>
</body>
</html>
Related
i consider that why template not render tag after {% include %}. when i put some tag like something in front of include tag, it work. But it not work if i try to put behind the include tag. :(
in index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'styles/main.css' %}" />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
</head>
<body>
<div class="d-flex">
{% include 'navbar.html' %}
<div class="content">
<div class="header">
{% include 'header.html' %}
</div>
<div>
{% block subHeader %}
{% endblock %}
</div>
<div>
{% block list %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
in list.html
<table class="table">
<thead>
<tr>
<th scope="col">Cardinal Number</th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Category</th>
<th scope="col">Cost</th>
<th scope="col">Note</th>
<th scope="col">Image</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
in products.html
{% extends 'index.html' %}
{% block subHeader %}
{% include 'components/subHeader.html' with url="api/add-product" name="product"
selectName="product-category" %}
{% endblock subHeader%}
{% block list %}
{% include 'components/list.html' %}
{% endblock content%}
although i put whatever after include tag in block subHeader, it not work. i dont understand why that. Can someone point me ? Thanks
Django has a nice sortable table system in the admin. I would like to know how can I use that in my regular templates.
I couldn´t find any info about this. Any clues welcome.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js "> </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body>
<table id="example" class="display" >
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>office</th>
<th>age</th>
<th> date </th>
</tr>
</thead>
<tbody>
{% for i in qs %}
<tr>
<td>{{ i.name }}</td>
<td>{{ i.position }}</td>
<td>{{ i.office }}</td>
<td>{{ i.age }}</td>
<td> {{ i.date }} </td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
I have an app that uploaded a file using the FileField(). Uploading the file works excellently but I have a problem on how to display the CSV file content into an HTML table where headings goes to the table header while the rows/lines of the CSV file goes to the appropriate cell in an HTML table.
For now i have a little success in retrieving the CSV file's columns. Here are the snippets.
Method:
# retrieve datafarame's columns
def get_columns(file):
df = pd.read_csv(file)
cols = df.columns
return cols
HTML:
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
{% for col in columns %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
If you are using pandas in the backend, then you can pass the dataframe.to_dict() from the view which will give you a list of dictionaries. You can iterate over the list of rows in your template.
views.py
def myview(request):
df = pd.read_csv(file)
return render(request, 'my_view.html', {'columns': df.columns, 'rows': df.to_dict('records')})
template.html
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
{% for col in columns %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for index, row in rows %}
<tr>
<td>{{row.name}}</td>
<td>{{row.email</td>
</tr>
{% endfor %}
</tbody>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect Outliers</title>
</head>
<body>
<button type="button">Upload</button>
<h1>Uploaded Data</h1>
<table border="1px">
<tr>
{% for data in DataFrame %}
<th>{{ data }}</th>
{% endfor %}
{% for _, record in DataFrame.iterrows %}
<tr>
{% for value in data %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tr>
</table>
</body>
</html>
I don't know how do write javascript for Django?
Please help me
The following javascript code is correct?
This code is write in the HTML:
base.html:
{% load staticfiles %}
index.html
{% extends "base.html" %}
<html>
<head>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#sampleTable").tablesorter();
);
</script>
<div class="import">
<table id="sampleTable" class="tablesorter">
<thead>
<tr>
<th class="{sorter:'metadata'}" style="width:100px">name</th>
<th class="{sorter:'metadata'}" style="width:260px">company</th>
</tr>
</thead>
</table>
{% if memo.count > 0 %}
{% for user in memo %}
<div><h3>
<table id="sampleTable1" class="tablesorter">
<tbody>
<td style=" border-bottom:1px solid #0099cc; text-align:center;">{{ user.user_name }}</td>
<td style=" border-bottom:1px solid #0099cc; text-align:center;">{{ user.company }}</td>
</tbody>
</table>
</div>
</body>
</html>
Django has nothing to do with Javascript by default. It just renders the templates and returns HTML. You write Javascript for Django, like you'd write anywhere else.
And whether that particular code is correct, Run it. If it runs then it's correct, if not, you have some error. But chances are they wont be related to Django.
BTW, your code is incomplete. You haven't closed the if and for blocks in the template. Also, if you're extending base.html, then your HTML should be inside a block that you defined in base.html. Please read the documentation before writing codes.
I use this Enlive template to transform the HTML below it to the HTML below that. Based on a collection of twitter names I generate a table with links. How can I get rid of the Hiccup inside the enlive/clone-for?
(enlive/deftemplate usernames-table-body
"public/whoisnotfollowingme.html"
[usernames]
[:table.names :tbody :tr]
(enlive/clone-for [username usernames]
[:td]
(enlive/html-content
(html [:a {:href (str "https://twitter.com/intent/user?screen_name=" username)} username]))))
HTML input
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/>
</head>
<body>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<div class="container">
<div class="hero-unit">
<p class="names">These people who you are following are not following you back!</p>
</div>
<table class="names table table-striped">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
HTML output
<html>
<head>
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<div class="container">
<div class="hero-unit">
<p class="names">These people who you are following are not following you back!</p>
</div>
<table class="names table table-striped">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td> < a href =" https://twitter.com/intent/user?screen_name=foo " > foo </ a > </td>
</tr> <tr>
<td> < a href =" https://twitter.com/intent/user?screen_name=bar " > bar </ a > </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You could change your tbody.tr template from:
<tr>
<td>name</td>
</tr>
to:
<tr>
<td>foo</td>
</tr>
Now your HTML resource is a working example of the output you want.
Then modify your deftemplate to support it:
(enlive/deftemplate usernames-table-body
"public/whoisnotfollowingme.html"
[usernames]
[:table.names :tbody :tr]
(enlive/clone-for [username usernames]
[:td :a]
(enlive/do->
(enlive/set-attr :href (str "https://twitter.com/intent/user?screen_name=" username))
(enlive/content username))))
Edited: If you want to get rid of the URL in the code, try change your href to ?screen_name= and then modify the code to something like:
(enlive/do->
(fn [node] (update-in node [:attrs :href] #(str % username)))
(enlive/content username))))
You could also make a function of it. See e.g. Append to an attribute in Enlive.