Show auto-incremental serial number in html table - html

I have one django project. In the template html page, I use a table to demonstrate data. In the first row of the table, I want to show the ID of "i". But since the i.0 is the batch_id of the model, it does not increment from 1. How could I change the html of this page to show the serial number in first row starting from 1?
<table width="100" border="1" style="table-layout:fixed;position:relative;left:75px;" bordercolor="#E0E0E0">
<tr bgcolor="#F0F0F0">
<th width="55px" style="word-wrap:break-word;"><div class="panel-heading">ID</div></th>
<th width="130px" style="word-wrap:break-word;"><div class="panel-heading">Search Content</div></th>
</tr>
<tr>
{% for i in datas %}
<td style="word-wrap:break-word;"><div class="panel-body"><small>{{ i.0 }}</small></div></td>
<td style="word-wrap:break-word;color: #0066CC"><div class="panel-body"><strong><small>{{ i.2 }}</small></strong></div></td>
{% endfor %}
</tr>
</table>

As mentioned by Parth Modi, your current loop just output the td.
If every set of data should be in a new row, you need to wrap the tr.
For your "serial number", I think you just talk about the loop count, starting from 1?
{{ forloop.counter }} is what you are searching for.
For more info about this, you should read this.

First of all, if you need a table that has multiple rows you need to change the location of "For loop" as you are looping td not tr. You need to place for loop above to the tag and endfor should be below . For the Id related doubt can you please show me the context "datas".

Related

Is there a way to apply multiple column based conditional formatting in angular when using ngFOR in td with columns names coming from a variable?

I am faced with a problem in my angular project. I am using one variable i.e. csvColumnHeaders for my column names as few column names keep changing. The rest column names are static.
My data variable object is vfyieldInfo.
I am using yield[column] in a ngfor loop to display my data for each column.
Question: I want to apply conditional color formatting on one fixed name column based on another fixed name column. How can I do that since I dont have separate for each column ?
<table class="table table-bordered" align="center">
<thead>
<tr align="center" class="myHeaderClass">
<th
*ngFor="let column of csvColumnHeaders"
scope="col"
class="headerGrey"
>
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr align="center" *ngFor="let yield of vfyieldInfo">
<td *ngFor="let column of csvColumnHeaders">
<p class="{{ column }}">{{ yield[column] }}</p>
</td>
</tr>
</tbody>
</table>
Thanks
Ankit
I am expecting to apply multiple column based conditional formatting. however I am not able to apply it since I dont have separate entries for each column. The reason behind that is that I am using a variable object for column names since few column names keep changing.
I want to apply conditional formatting on the columns whose names dont change.
Use ngStyle for support conditional case.
Example
<td *ngFor="let column of csvColumnHeaders"
[ngStyle]="{'background-color': (column=='id') ? 'black' : 'white'}">
<p class="{{ column }}">{{ yield[column] }}</p>
</td>
Ref: Document

How can I use for loop in HTML to display data in a table with format

So I'm a beginner and I'm using django and python. I created a table here and I want to display all data in a queryset. Plus I want to have 4 columns. So I want something like, for each four items in the queryset, create a and display the 4 items, but it seems like I can only do one item in each loop.
My code looks like this, and it's dipslaying one each row right now.
Code for the table
Is it possible to do this in html?
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column1</th>
<th>Column1</th>
<th>Column1</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td><img src="{{user.img_url}}"></td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.bookmarks.count}}</td>
</tr>
{% endfor %}
</tbody>
</table>

VueJs v-for renders divs but not table rows?

I'm having trouble understanding why this is happening! So, this block of code:
<div class="container">
<div class="row" v-for="rows in data.Rows"> {{ rows }} </div>
</div>
Will render all the rows in the object.
But, when I use the same syntax in a table instead like this:
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
I get the error:
[Vue warn]: Property or method "rows" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
How come there are issues in using the v-for like this in a table? I want a table to display the data as it better suits the purpose in this case. Othewise I would have chosen divs instead of table rows, but I would love for this to works. Any ideas as to why this is happening?
If you use that template directly within an HTML file (as opposed to a template string or SFC) it will be parsed by the browser before it gets to Vue. Browsers are fussy about tables and what elements are allowed inside which other elements.
The example below shows how the browser will parse your template into DOM nodes. Notice how the {{ rows }} gets moved:
let html = document.getElementById('app').innerHTML
html = html.replace(/</g, '<').replace(/>/g, '>')
document.getElementById('output').innerHTML = html
#app {
display: none;
}
<div id="app">
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
</div>
<pre id="output">
</pre>
It is this mangled version of the template that Vue is trying to run and as you can see {{ rows }} has been moved outside the v-for, causing the error.
The official documentation covers this here:
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
The solution would just be to include a <td> in your template:
<table>
<tr v-for="rows in data.Rows">
<td>{{ rows }}</td>
</tr>
</table>
You cannot directly use "rows" property inside tr tag, you need td tag
like this
<table>
<tr class="row" v-for="rows in data.Rows"> <td>{{ rows }} </td></tr>
</table>
working codepen here: https://codepen.io/chansv/pen/dyyVybK

I want to render a table in django using list as the column, but I'm getting the list repeating twice

My list in teams has two object teams and my list in partidosjugados has a list of 2 items. However, when I use this code, the code renders a list below the column of PJ and the column of PG. Nevertheless, the code should only display below the column of PJ because the list from partidosjugados has only two elements and not four.
<table>
<tr>
<th> Equipo</th>
<th>PJ</th>
<th>PG</th>
<th>PE</th>
<th>PP</th>
<th> GF </th>
<th> GC </th>
<th> GD </th>
<th> PTS </th>
</tr>
{% for team in teams %}
<tr>
<td>{{team.name}}</td>
{% for partido in partidosjugados %}
<td>{{partido}}</td>
{% endfor %}
</tr>
{% endfor %}
<td></td>
<td></td>
<td></td>
</tr>
</table>
Your HTML elements are bit messed up. I am not sure if the cause of your problems or effect of you removing something from the template. In any case, if i look at this code, then the end result would be row ending but not starting and lot of table cells without row.
Also, your code shows that the table will be something like this
<tr><!-- Teams loop starts here -->
<td> teamname </td>
<td></td><!-- partidosjugados loop starts here -->
...
<td></td><!-- partidosjugados loop ends here -->
</tr>
<tr>
<td> teamname </td>
<td></td><!-- partidosjugados loop starts here -->
...
<td></td><!-- partidosjugados loop ends here -->
</tr><-- Teams loop ends here -->
From the table that you posted we see several problems.
1) You loop over partidosjugados once per every team. This seems to be the cause of your problems
2) Your post hints that the teams rows are not as long as header rows. In that case i suggest you use colspan attribute to make columns wider. Otherwise table will be ugly
3) your template shows last row ending but not starting.

White Space in HTML from Django Template

I have a django app that I need to get in a list format. My problem is the how the event list is stylized in HTML after I filter my results. I have tried to add and it does not seem to take and probably isn't the best practice.
I have been successful with using a table, but really don't like the look of it. Is there a way to just have an unordered list with appropriate spacing using a div or span tag? For example I would like for my list to look like
2/6/2013 Widget Company Chicago
2/7/2013 Dodad Company2 Kansas City
rather than
2/6/2013 Widget Company Chicago
2/7/2013 Dodad Company2 Kansas City
Here is my code, currently as a table.
{% if latest_events %}
{% for event in latest_events %}
<table border="1">
<tr>
<td> {{ event.event_date }} </td> <td>{{ event.company }}</td> <td> {{ event.venue }} </td> <td>{{ event.city }}</td>
</tr>
</table>
{% endfor %}
</ul>
{% else %}
<p>No Events are available.</p>
{% endif %}
Use the center template-tag - it will do the job for you.
Available alternatives: ljust and rjust
If all you want is extra spacing between the elements, add some padding.
http://jsfiddle.net/n762q/
table.associates td, table.associates th {
padding-right: 2em;
}
<table class="associates">
<thead>
<tr>
<th>Date</th>
<th>Company</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>2/6/2013</td>
<td>Widget Company</td>
<td>Chicago</td>
</tr>
<tr>
<td>2/7/2013</td>
<td>Dodad Company2</td>
<td>Kansas City</td>
</tr>
</tbody>
</table>
Alternately, you could specify a min-width on your cells or the table itself.
http://jsfiddle.net/n762q/1/
table.associates {
min-width: 70%;
}
The problem here is browsers strip sequences of white space, so(_ = space) ____ will become _.
As stated above the solution is to style your table.
Just setting a width on the table element may give you the results you're looking for as tables do not consume more width than necessary by default. However they adjust their cells with the change of their width.
You are dealing here with HTML only, I recommend using Twitter Bootstrap since it comes with a lot of nice things(style/css) you can use and is really extremely easy to use. For example, it has tables, give it a look at it Twitter Boostrap tables or maybe the grid Twitter Bootstrap Grid