I am listing the rows of a table (fields: Name, Emails, Category, Expiry) via a template:
<table border="1" style="width:100%">
<tr>
<th style="width:20%">Name</th>
<th style="width:40%">Emails</th>
<th>Category</th>
<th>Expiry </th>
<th>Action</th>
</tr>
{% for obj in expiredlist %}
<tr>
<td>{{obj.name}}</td>
<td>{{obj.emails}}</td>
<td>{{obj.category}}</td>
<td>{{obj.expiry}}</td>
</tr>
{% endfor %}
</table>
Now I want to allow users to edit one of the fields on the fly (like how we do it in datatable).
I tried to add a new column by adding:
<td><form method="post">
{{form.expiry}}
</form>
<input type="submit" value="Submit"></td>
Thinking that the above will allow users to edit expiry field on the fly. I know I am not passing any info about each row (not able to connect with id).
Can someone guide me how can I do this?
Related
Hi I'm trying to create a table that will show values based on the selected name. For instance if a drop down existed and a value was chosen, the rest of the fields would show the data associated with that chosen value.
<div class="main-items">
<h2>Database</h2>
<div class="card-items">
<table class="main-items-table">
<tr>
<td class="menu-box-tab-items-identifiers">Name:</td>
{% for d in database %}
<td class="menu-box-tab-items" href="/cusip/{{d.company_name}}"><span>{{d.name}}</span></td>
{% endfor %}
</tr>
<tr>
<td class="menu-box-tab-items-identifiers">Item:</td>
{% for d in database %}
<td class="menu-box-tab-items"><span>{{d.item}}</span></td>
{% endfor %}
</tr>
<tr>
<td class="menu-box-tab-items-identifiers">Method of Shipment:</td>
{% for d in database %}
<td class="menu-box-tab-items" href="#6"><span>{{d.method_of_shipment}}</span></td>
{% endfor %}
</tr>
<tr>
<td class="menu-box-tab-items-identifiers">Days:</td>
{% for d in database %}
<td class="menu-box-tab-items" href="#6"><span>{{d.days}}</span></td>
{% endfor %}
</tr>
<tr>
<td class="menu-box-tab-items-identifiers">Location:</td>
{% for d in database %}
<td class="menu-box-tab-items"></span>{{d.location}}</td>
{% endfor %}
</tr>
<tr>
<td class="menu-box-tab-items-identifiers">Country:</td>
{% for d in database %}
<td class="menu-box-tab-items" href="#6"><span>{{d.country}}</span></td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
</div>
Basically, if a drop down menu existed for all the "names", I would want all the other td's to show the data associated with that name. If anyone can help it would be greatly appreciated.
Your options are:
To require the user to submit the form once the first option has been selected and to then refresh the template with related options in the other fields. You would need some code in your forms.py file that can take the provided option and filter the other querysets accordingly.
Use javascript and an AJAX request to dynamically update the other field options once the first field has been selected, here is some useful information:
Django Ajax Jquery Call
Making a web app that lets a user log workouts. I have a page that groups all the logged workouts together by date, using regroup and a for 2 loops. How do I only show the user that is logged in information their own information. When I try to use a 3rd for loop (ex. {% for workout in workouts%}, {% if workout.person == user %})I just get 2 tables with the same information. Heres the code in my template.
{% regroup workouts by date_of as dateof %}
{%for date_of in dateof %}
<table class="table table-striped table-dark mt-3">
<thead>
<th scope="col">{{date_of.grouper}}</th>
</thead>
<thead>
<tr>
<th scope="col">Body Part</th>
<th scope="col">Exercise</th>
<th scope="col">Weight(lbs)</th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
</tr>
</thead>
<tbody>
{% for workout in date_of.list %}
<tr>
<td>{{workout.body_part}}</td>
<td>{{workout.exercise}}</td>
<td>{{workout.weight}}</td>
<td>{{workout.sets}}</td>
<td>{{workout.reps}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
Thanks #gunsodo, after looking into it filtering the ListView with get_queryset solved the problem. 🙌🏼
I want to display table with basic informations about products, and add hyperlink to cells in column "Product name" after clicking which you will be redirected to more detailed description of product with possibility to edtiing, deleting it etc.
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
{% for element in object %}
<tr>
<td><div class="btn active"><i class="fa fa-check"></i></div></td>
<td>
<a href="{% url 'prod_desc' pk:element.pk %}">
{{element.name|lower|capfirst}}
</a>
</td>
<td>
{{element.price}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
How can I connect hiperlink with product name in table?
In case is there any walk-around solution ?
Is there any restriction about inserting hyperlink in html in general or it's a "Django thing" ?
The problem was in passing primary key of element I used ":" like in dictionary key:value instead of "="
<a href="{% url 'prod_desc' pk=element.pk %}">
{{element.name|lower|capfirst}}
</a>
I have a datatable in Django that functions fine when hardcoded, but when I add my Django template tags it breaks. The inspect on the page says: Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined in jquery.datatables.min.js
This only happens when I have more than one user in the table, or try to add a column in the table with django. Since I will be using multiple datatables in my project, I need to figure out what I'm doing wrong. The datatable JS code I'm using comes from a template, and I'm not sure if the error is in the template code or in my Django template code. So please excuse the long code blocks.
employees.html (django template):
<div class="card-body collapse in">
<div class="card-block card-dashboard">
<button id="addRow" class="btn btn-primary mb-2 js-create-employee"><i class="ft-plus"></i> Add New Employee</button>
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for profile in user_profile_list %}
<tr>
{% if not profile.user.is_superuser %}
<td>{{ profile.user.get_full_name }}</td>
<td>{{ profile.user.username }}</td>
<td>
{% for g in profile.user.groups.all %}
<div class="tag tag-default">{{ g.name|split:'_'|title }}</div>
{% endfor %}
</td>
<td>{{ profile.user.email }}</td>
<td>{{ profile.mobile_phone }}</td>
<td><i class="fa fa-pencil"></i> <a href="#" alt="Assign"><i class="fa fa-link"></i><a/> <a href="#" alt="delete"><i class="fa fa-times"></i><a/></td>
{% endif %}
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
Datatable instantiation:
$(document).ready(function() {
/****************************************
* js of zero configuration *
****************************************/
$('.zero-configuration').DataTable();
});
Jquery.datatables.min.js and dataTables.bootstrap4.min.js are also used, but those come stock from bootstrap 4. I'm not going to add them here unless needed, and they are minified anyway.
This issues occurs only when data is not available for the table or tags.
You have conditions in template using django templatestag So the number of every <td> element in your table that is a child of a <tr> element doesn't match the number of <th> elements that are a child of the element.
Please make sure you have same number of <td> tag in <tbody> tag.
EDIT:
Maybe {% if not profile.user.is_superuser %} this condition creating this issue. If user is superuser then no <td> tag will create that will not match same number of <th> in <thead>
This is the view function:
def main_view(request):
x=request.POST.getlist('checks')
print x
return render(request, 'main.html')
This is main.html
<form role="form" action="/main/" method="post">{% csrf_token %}
<table class="table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data21</td>
<td>data22</td>
<td>data23</td>
</tr>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data31</td>
<td>data32</td>
<td>data33</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-default btn-success pull-right">Remove</button>
</form>
When I run the app, on the console the output of print statement (in main_view) is
[u'on', u'on']
Basically, what I'm trying to do is, user should be able to select entries from HTML table and when he/she clicks on "Remove" button, the entries should be removed. I don't know how to get the information about selected entries from the request object in my view. How can I handle this in my view?
You need to give your checkboxes a value attribute corresponding to the ID of the record.
<td><input type="checkbox" name="checks" id="1" value="data31" />data31</td>
Note that a) the readable value should be a label, to improve accessibility, and b) you probably want to output both value and label with a template variable from the record itself.