I am loading API data into a table using Flask and once the elements are placed in their cells, I have jQuery to add bootstrap class to the td elements. When I add bootstrap classes "btn" and "btn-secondary", the two td elements are sticking side by side where as I want them in their respective columns.
<table>
<tbody id="myTable">
{% for row in values %}
<tr class="item">
<td class="link">Link</td>
{% for element in row['values'] %}
<td>{{ element }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
The for loops are jinja templating to substitute the values into the table
$(".item td:nth-child(7)").addClass("requestedStatus btn btn-secondary");
$(".item td:nth-child(7)").on('click', function() {
$(this).text($(this).text() == 'IN' ? 'OUT' : 'IN');
})
// Add button feature and Toggle text between True and False for usageFlag column
$(".item td:nth-child(8)").addClass("usageFlag btn");
$(".item td:nth-child(8)").on('click', function() {
$(this).text($(this).text() == 'True' ? 'False' : 'True');
})
Please assist me on this.
Related
By default bootstrap table is sorted using the first column. This setting can be changed with data-sort-name="column_name" data-sort-order="asc/desc" as mentioned here link.
In my scenario the column names are created dynamically based on a python script. As such the data-sort-name option is not helpful.
Is it possible to specify the column I want the default sorting to be done by the column index?
<table id="table_example"
class="table table-striped"
data-toggle="table"
<thead>
<tr>
{% for col in column_names %}
<th>{{col}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in row_data %}
<tr>
{% for col, row_ in zip(column_names, row) %}
<td>{{row_}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
I've solved the problem by adding the following script with column index 1:
<script>
$(document).ready(function () {
$('#table_example').DataTable({
"order": [[ 1, "desc" ]]
});
});
</script>
I'm using a datatable in Bootstrap to create a table which jinja2 will populate with values passed from Flask, example below:
Name
URL
google
www.google.com
reddit
www.reddit.com
{% for site in results %}
<tr>
<td>{{ site['sitename'] }}</td>
<td>{{ site['url'] }}</td>
</tr>
{% endfor %}
I also have site['new_url'] which is passed in results. I want to make the site['url'] clickable and have that toggle between site['url'] and site['new_url'] when clicked.
I'd like to implement using JS if possible or if there is another easier way I'm up for that too!
Any help is appreciated!
A Js solution:
{% for site in results %}
<tr>
<td>{{ site['sitename'] }}</td>
<td onclick="swapText()" id="target">{{ site['url'] }}</td>
</tr>
<script>
function swapText() {
var x = document.getElementById("target");
if (x.innerHTML === "{{ site['url'] }}") {
x.innerHTML = "{{ site['new_url'] }}";
} else {
x.innerHTML = "{{ site['url'] }}";
}
}
</script>
{% endfor %}
new to coding. I'm creating an inventory table'with the django framework. I'd like to be able to click on a table row (which is a part) that will then parse that row/part information to a detail view. from what I understand table rows are inline elements and inline elements are psuedo code which current HTML does not allow for an anchor tag to be thrown in (bad practice?) so I need to use some javascript. Currently, the inventory view shows when I use runserver (http://127.0.0.1:8000/inventory/) but clicking on any row does nothing. Here is what I have so far;
inventory.html
{% extends "base.html" %}
{% block body %}
<br>
<table class="table table-hover">
<thead>
<tr>
<th>Part Number</th>
<th>Description</th>
<th>Location</th>
<th>Supplier</th>
<th>S.O.H</th>
</tr>
</thead>
<tbody>
{% for part in parts %}
<!-- need to make these table rows link to their respective parts
class="table_row" href="{{ selected_part.partnumber }}/detail">{{ selected_part.partnumber }}-->
<tr data-href="{% url 'detail' part.pk %}">
<td>{{ part.pk }}</td>
<td>{{ part.partnumber }}</td>
<td>{{ part.description }}</td>
<td>{{ part.location }}</td>
<td>{{ part.supplier }}</td>
<td>{{ part.stockonhand }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
urls.py
from django.urls import path
from .views import *
urlpatterns = [
path('inventory/', inventory_list, name='inventory'), # URL path for inventory_list view
path('<str:pk>/', part_information, name='detail'),
path('', index, name='index'),
]
custom.js
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
base.html has <script src="/docs/4.4/dist/js/custom.js"></script> before the </body> tag.
I think the issues is in my javascript file. I'm pretty new to this and simplified explanations would be greatly appreciated
Use the below in your custom.js file. When the page is loaded then this function $(document).ready() gets executed initialising the tr on what to do 'On Click'
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).data('href');
return false;
});
});
I am trying to get the id which is dynamically generated. I am using a class name to access it. If I click on the td item once, there is no alert. But when I click twice I will get the alert (for the first time). If I click on the second item, I get an alert two times. If on third, I get it three times and so on. What is the error?
My JavaScript code:
function myFunction() {
$('.task0').click(function() {
var x = $(this).data('id');
alert(x);
});
}
My HTML-Flask code:
<tbody>
{% set ns = namespace(num=1) %}
{% for task in tasklist %}
<tr>
<td>{{ ns.num }}</td>
<td class="task0" data-id="{{ task[0] }}"><a href="javascript:myFunction();" >{{ task[0] }}</a></td>
{% for i in range(1,task|count) %}
<td>{{ task[i] }}</td>
{% endfor %}
</tr>
{% set ns.num = ns.num+1 %}
{% endfor %}
</tbody>
You are calling the function twice. The .click you are using in jquery is already calls the function then your make the a tag call the JavaScript function as well. Remove the call to the function from the a tag
Every time you click on td you attach one more listener. you need to attach listner at once for all dynamically created elements.
remove javascript function call in your html part.
and change your javascript as below.
$(document).on(click, '.tasklink', function(e){
e.preventDefault();
var x = $(this).parents('td.task0').data('id');
alert(x);
})
<tbody>
{% set ns = namespace(num=1) %}
{% for task in tasklist %}
<tr>
<td>{{ ns.num }}</td>
<td class="task0" data-id="{{ task[0] }}"><a class="tasklink" href="#" >{{ task[0] }}</a></td>
{% for i in range(1,task|count) %}
<td>{{ task[i] }}</td>
{% endfor %}
</tr>
{% set ns.num = ns.num+1 %}
{% endfor %}
</tbody>
HTML:
{% for item in result %}
<tr id="row">
<td><input name="item" type="checkbox" value="{{ item.number }}"></td>
<td contenteditable id="col1">{{ item.foo }}</td>
<td contenteditable id="col4">{{ item.bar }}</td>
</tr>
{% endfor %}
I am using facebox . Where I want to show the single row in the facebox which ever i checked ( checked the checkbox, which is in first <td> ). Jquery is:
$(document).ready(function() {
$('#edit').click(function() {
jQuery.facebox({ div: '#row' })
return false;
});
});
This jquery is giving me the first row only.
You cannot use the same "id" value for more than one element in a page.
You can change that from "id" to "class" and it (might) work. It's hard to tell what exactly you're doing.
<tr class='row'>
<!-- ... -->
</tr>
then
// ...
jQuery.facebox({div: '.row'});
Of course you could just find the <tr> elements directly:
jQuery.facebox({div: 'tr'});