We Keep Coding

Substituting values in a HTML table?

I am making a HTML table to display boxes (in a stockroom) that have been added, removed and changed. The headings are denoting the owner of the box, the type of change that has occurred and the new content of the box.
Im using Django for my backend.
Can I translate the values in the 'Type of Change' into English words rather than the symbols (~, - and +)? I am using Django simple-history to record changes to my models and it returns these symbols. I would like my table to read 'Changed', 'Removed' and 'Added' in place of '~', '-' and '+' respectfully.
This is the view.py:
def dashboard(request):
box_content_history = Box.history.all().order_by('-history_date')
return render(request, 'main_app/dashboard.html', {""box_content_history":box_content_history})
The HTML:
<table id="asset_changes_datatable">
<thead>
<tr>
<th>Owner</th>
<th>Type of Change</th>
<th>Box Contents</th>
</tr>
</thead>
<tbody>
{% for item in box_content_history %}
<tr>
<td>{{ item.project_assigned_to }}</td>
<td>{{ item.history_type }}</td>
<td>{{ item.box_contents }}</td>
</tr>
{% endfor %}
</tbody>
</table>

As already mentioned in the comments just change {{ item.history_type }} to {{ item.get_history_type_display }} in the template.
What is this sorcery and where does it come from?
This is actually vanilla django functionality and is explained in the Model instance reference.
For every field that has choices set, the object will have a get_FOO_display() method, where FOO is the name of the field. This method returns the “human-readable” value of the field.
Why does it work for the history_type field of django-simple-history?
Quite simple: The history_type field has the aforementioned choices set. I checked that by looking at their source code on github.
"history_type": models.CharField(
max_length=1,
choices=(("+", _("Created")), ("~", _("Changed")), ("-", _("Deleted"))),
),

Creating a 'view' link in a grid listing that navigates to a detail route such as hero/:id in Angular

In my template I am doing the following:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td>View</td>
</tr>
</tbody>
How can I make it so View is a link that navigates to /heroes/:id? I have this setup in my route config. I verified that it works by going to http://localhost:4200/heroes/1
Am I better off using the (click) event and calling a function such as viewHero(id). If I did this I wouldn't be sure how to pass the id. Also, if it can be done directly inside of the html template within the href tag or routerLink I would like to know how to do that too. My main problem seems to be accessing h.id inside of a string such as href="".
Update: I got the following to work, but still not happy with it:
<td><a (click)="viewHero(h)">View</a></td>
viewHero(hero) {
this.router.navigate(['/heroes', hero.id]);
}
There has to be a way to simply do this inside of the anchor tag directly. I am not getting a pointer finger when hovering the link.

Try this:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td><a routerLink="/heroes/{{h.id}}">View</a></td>
</tr>
</tbody>

JQuery hide function works for th but not td

I'm using the following code:
This is html table:
<table id="preTbl">
<tr>
<th>Type</th>
<th>Origin</th>
<th>Count</th>
<th>Age Range</th>
<th>Gender</th>
</tr>
<tr ng-repeat="row in returnData" class="centered">
<td>{{ row.TypeName }}</td>
<td>{{ row.Origin }}</td>
<td>{{ row.Count }}</td>
<td>{{ row.ageRange}}</td>
<td>{{ row.gender}}</td>
</tr>
</table>
My JS function with user clicks search:
$("#preTbl th:nth-child(4)").hide();
$("#preTbl td:nth-child(4)").hide();
The th hides fine, but the td will not hide.

Working fiddle.
The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
You may need to use :eq() or .eq() instead :
$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();
Hope this helps.
$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" id='preTbl'>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Column 0 content</td>
<td>Column 1 content</td>
<td>Column 2 content</td>
</tr>
</table>

I found that b/c of the many styles being applied since this is a big application, I had to rely on using ng-hide. You can see read from here it has to be manually overriden because it uses !important, but it helped a lot in my case to get the job done.
angularjs ng-hide information
Thanks and I hope this helps people in the future!

How to update a value in a table with angular js

I'm using PHP/MySQL/Socket.IO/NodeJS. I'm trying to expand my website and add more functionality to it. Essentially I need to update a table when a new user is added to the table, but I need to do it with AngularJS I'm pretty sure.
<pre>
<thead>
<tr>
<th>Name</th>
<th>Risk</th>
</tr>
</thead>
<tbody>
<tr><td> Joe </td> <td> 5 </td>
</tbody>
So as you can see Joe has a "Risk" Value of 5 this could change based on a couple different things. I need to know of a way to change Joe's value when a socket event is called with AngularJS or if there is another way that would be easier that would work.

You have a javascript model with the data and when you update the data, the view will be updated respectively. After incoming socket, you just update the $scope.users.
In your controller:
$scope.users = [
{ name: 'Joe', risk: 5 }
];
In your template:
<thead>
<tr>
<th>Name</th>
<th>Risk</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.risk }}</td>
</tbody>

Vue js and Data Table Panigation not Working

Ok, so unfortunately I have come across this issue. So first a little about specs of my app.
I am using
Vue.js
vue-resource.js
jQuery
jQuery DataTables
Now because I'm grabbing the data through vue-resource, for some reason when the ajax call is final finished and vue imports the data to the table, datatables decides not to render pagination, and displays all 200 results on one page. Is there anyway to refresh datatables so it is rendered with pagination after it has been imported into the table?
My ajax call:
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
var dt = $('#myTable').DataTable();
});
My Table:
<table id="myTable" class="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr v-repeat="customers[0]">
<td>#{{ firstName }} #{{ lastName }}</td>
<td>#{{ email }}</td>
<td>#{{ trackingNumber }}</td>
<td>#{{ address }}</td>
</tr>
</tbody>
</table>
EDIT
I have found out that none of the functions work. If i try to select any row, the table is instantly cleaned. My model (vue model) still has all the objects inside.
SOLUTION:
I just set a wait time to initiate data tables after I collect the data via ajax request. It's a little ghetto, but a least it works. If I find a better fix Ill edit this post.
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
setTimeout(function(){$('#myTable').DataTable();}, 5000);
});

A delay of 0 did the trick for me, although not sure why.
setTimeout(function(){$('#myTable').DataTable();}, 0);

I've built a dedicated vue grid component: vue-tables . You might want to check it out.