I have the following table in a flask app. The first column is supposed to render a fully formed linked statement for example:
<img src="/static/assets/img/abc.jpg" width="100" height="100">
The data comes from a query:
Table looks thus:
|img | Title |
-----------------------------------------------
| the <a> script above goes here | some text|
I would like to write the javascript to render the image/link.
<table id="table_id" class="display compact" style="width:100%">
<thead>
<tr>
{% for col in img_list_cols %}
<th>{{col}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in img_list_rows %}
<tr>
{% for row_data in row %}
<td>{{row_data}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
You can use the Jinja safe filter, e.g..
<td>{{row_data|safe}}</td>
Related
I'm at a total loss on how to do this. I'm building a webpage and I need to be able to delete a record from my SQLite database once the user clicks the delete icon on the front end. Can someone please help me figure out how to do this? I have no experience using PHP so any reference to that just won't be helpful. As you can see from the entries page a user will be able to see all entries entered already; each entry_id is unique. If a user clicks delete, then I want the row deleted from the entries page, and also deleted from the DB. If a user clicks the edit button that's another beast, and I'd like to be able to show on click, the populated form in edit mode, and once a user makes changes and click save, then have those changes updated in the DB as well.
Here's my html code:
{% extends "layout.html" %}
{% block title %}
index
{% endblock %}
{% block main %}
{% if msg %}
<div class="alert alert-danger" role="alert"> {{ msg }}
</div>
{% endif %}
<div>
<form method="POST" action="/entries">
<table class="table table-hover table-sm table-bordered">
<thead class="thead-light">
<tr>
<th class="col-auto"> ID </th>
<!--<th class="col-auto" style="display:none;"> entryid</th>-->
<th class="col-auto"> Edit </th>
<th class="col-auto"> Delete </th>
<th class="col-auto">View</th>
<th class="col-auto">Date</th>
<th class="left">Title</th>
<th class="left">Notes</th>
</tr>
</thead>
<tbody >
{% for row in entrylist %}
<tr>
<td id="{{row.entry_id}}"></td>
<!--<td style="display:none;" id="{{row.entry_id}}"> {{row.entry_id}}-->
<td> <a title="Add" data-toggle="tooltip" class="btn" id="{{row.entry_id}}"><i class="bi bi-pencil-fill"> </i></a></td>
<td> <a class="btn" data-toggle="tooltip" title="delete" id="{{row.entry_id}}"><i class="bi bi-trash" style="color:red;"></i></a></td>
<td> <a class="btn" data-toggle="tooltip" title = "view" id="{{row.entry_id}}"><i class="bi bi-journals"></i></a></td>
<td id="{{row.entry_id}}"> {{row.entry_dt}}</td>
<td class="ellipsistd" id="{{row.entry_id}}"> {{row.title }} </td>
<td class="ellipsis" id ="{{row.entry_id}}">{{row.notes }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
{% endblock %}
Here's my flask code:
#app.route("/entries", methods=['GET'])
#login_required
def entries():
if request.method == "GET":
entrylist = db.execute ("SELECT * FROM entries WHERE id = ? AND entry_dt <> '' ORDER BY entry_id", session["user_id"])
# print(entrylist)
return render_template ("entries.html", entrylist = entrylist)
I did as suggested and wrote a delete function on flask that deletes the row from my db. On the front end, i just did a jquery to remove row from the view.
I am using DataTables for my project but its sorting function does not work properly. I have tried every single solutions in here but none of them worked for me as well as it does not show the error in the console. I think in my code there is a jQuery conflict. How can I solve this issue? any help?
<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
width="100%">
<thead>
<tr>
{# <th scope="col"><input type="checkbox"></th>#}
<th scope="col">Name</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
{% for contact in contacts %}
<tbody>
<tr data-id="{{ contact.id }}" class="clickable-row"
data-href="{% url 'contact-detail' contact.id %}"
style="cursor: pointer; ">
{# <th scope="row"><input type="checkbox" id="check"></th>#}
<td>{{ contact.client_name }}</td>
<td>{{ contact.client_company_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.work_phone }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% csrf_token %}
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
as you can see it is a material bootstrap design datatables. In the example shown it works but when i add to my project it does not.
Your html table is "not valid" (It is valid if you want to create multiple table into an parent table). This can make some issue with Datatable. I think sorting is done, but you do not see it, because it sort by tbody tag and there is one line sorted by tbody. The tbody tags are not sorted only the tr inside
Try to remove the tbody into your loop and export it outside the for loop.
<tbody>
{% for contact in contacts %}
// ...
{% endfor %}
</tbody>
Note: cellspacing="0" is an old version of html. You can replace it by the css property border-spacing
I have an HTML table displaying the titles and sources of news articles. The news articles come from a JSON object. I can't figure out how to make it save the specific article you click the 'submit' button next to (=extract the appropriate element from a JSON array). I'd want to return/save it to some sort of output that I can then store in SQL. Please help?
The table looks like this:
<thead>
<tr>
<th>Article</th>
<th>News Source</th>
</tr>
</thead>
<tbody>
{% for article in articles.articles %}
<tr>
<div id = {{ article.title }}>
<td><a href = {{ article.url }}>{{ article.title }}</a></td>
<td>{{ article.source.name }}</td>
</div>
<td><form method="post"><button class="btn btn-primary" type="submit">Save to profile</button></form></td>
</tr>
{% endfor %}
</tbody>
</table>
I have a table where the rows are clickable. when you click on them the row beneth them containing a hidden div is expanded, exposing a nested table of related data. That works the way I had intended.
The problem is that the last column of the table has an edit button. when the edit button is pressed the row is expanded right before it redirects to edit page. This looks very sloppy. is there any way to remove the event from that column only?
Here is my code. This is a Django Template BTW.
HTML
<table id="exp" class="feedtable table table-hover table-bordered ">
<thead>
<tr>
<th>Scales</th><th>Type</th><th>Edit</th>
</tr>
</thead>
<tbody>
{% for scale in scales %}
<tr>
<td><p class="scalet">{{scale}}<p></td><td>{{scale.calc_type}}</td><td><a href="{% url 'questions:edit_feedback' scale.pk %}" class="btn btn-default">Edit</td>
</tr>
<tr>
<td colspan="3">
<div id="{{scale.pk}}div">
<table id="{{scale.pk}}table" class="feedtable table-hover table-bordered">
{% for question in questions %}
{% if question.scale == scale%}
<tr>
<td>{{question | safe}}</td><td><a class='btn btn-default' href="{% url 'questions:edit_question' question.pk %}">Edit</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
JQuery
$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
console.log("hit")
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});
you can use event.target object and class,
e.g.)
if a column has "a specific class(or attribute)", you can remove the event
$(document).ready(
function(){
$("tr").click(function(event){
console.log($(event.target).hasClass("except"));
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="except">except</td>
<td>data</td>
</tr>
</table>
maybe some of you know the blueimp's jquery file upload plugin: https://github.com/blueimp/jQuery-File-Upload/ . I have the following problem, I want to hide a part of table with already uploaded files and I can't do it, when I'm doing it on normal table, i'm doing it this way: https://stackoverflow.com/a/215231/1353905.
but when I'm trying to add tbody tag into this table code ( i want to hide rows 9,10,11 - table contains 11 rows):
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { alert(i); %}
{% if(i==8) { %}
<tbody style="display:none;"> // I'm ADDING THIS
{% } %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<img src="{%=file.thumbnail_url%}">
{% } %}</td>
<td class="name">
{%=file.name%}
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% if(i==10) { %}
</tbody> // here are my 3 lines too
{% } %}
{% } %}
</script>