How to update a value in a table with angular js - javascript

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>

Related

table not displayed using bootstrap vue

I'm trying to display a table of flowers but it won't show. I'm not sure how to use my data to display them. any help would be appreciated
<b-table>
<thead>
<tr>
<th>Name</th>
<th>Petals</th>
</tr>
</thead>
<tbody>
<tr v-for="flower in flowers" :key="flower.id">
<td>{{ flower.name }}</td>
<td>{{ flower.petal }}</td>
</tr>
</tbody>
</b-table>
That is not how <b-table> is used.
You supply <b-table> with an array, via the items prop, and it will generate the table itself. Which can be further customized by using other props and slots.
I would suggest you look at a few of the examples, to understand how the basics work.
https://bootstrap-vue.org/docs/components/table#tables
If you want to write the structure yourself, you should use <b-table-simple>.
https://bootstrap-vue.org/docs/components/table#simple-tables

HTML table how i can insert values of that table to sql (laravel)

On Laravel test.blade.php i got this table with data, editable data. User see that table,adds some values to editable td.How i can parse that table with button onclick or code to sql table database.Tried Jquery to PHP conversion didnt worked (converted data to array in query and tried get array to php variable), tried Simple DOMS didnt worked too.
<table id="examplecopy10" class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>stuff</th>
<th>editable stuff</th>
<th>editable stufftwo</th>
</tr>
</thead>
<tbody>
#foreach ($a as $b)
<tr>
<td> {{ $b->id }} </td>
<td> {{ $b->code }} </td>
<td> {{ $b->stuff }} </td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
#endforeach
</tbody>
</table>
I think you should use some Javascript framework to do that. Vue js is the best idea, Vue js is support with Laravel, so you can use it easy. You can do any thing with Laravel and Vue js.

To map data generated from backend to checkboxes in angular 4

I'm facing one problem!
Here all underwriter records are fetched from mysql database and shown now I want to add some records to list by using checkboxes but I dont know how to bind autogenerated data to checkboxes using "userid"and also to add it in list.
Can anyone help me?
Here I used Angular 4 for frontend development and mysql database for backend.
Here I,m sharing my angular 4 code snippet ....
////underwriter.component.html
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>Application Id</td>
<td>Plan Id</td>
<td>User Id</td>
<td>Plan Name</td>
<td>Plan Type</td>
<td>Category</td>
<td>Salary</td>
<td>Dependents</td>
<td>Status</td>
<td>Sum Assured</td>
<td>Approval records</td>
</tr>
<tr *ngFor="let ud of underwriterdata" [value]="ud.user_id">
<td>{{ud.app_id}}</td>
<td>{{ud.plan_id}}</td>
<td>{{ud.user_id}}</td>
<td>{{ud.plan_name}}</td>
<td>{{ud.plan_type}}</td>
<td>{{ud.category}}</td>
<td>{{ud.salary}}</td>
<td>{{ud.dependents}}</td>
<td>{{ud.status}}</td>
<td>{{ud.sum_assured}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</td>
</tr>
</table>
<button (click)="approveRecords()" class="button">Approve</button>

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!

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.

Categories