In my html page,I have a table that displays data that come from my database. I want refresh the datatable when my database is updated without refresh all the page. I'm using PHP framwork Laravel.
<table id="example" class="table">
<thead>
<tr class="headings">
<th>ID </th>
<th>first name </th>
<th>last name </th>
<th>E-mail </th>
<th>birthday </th>
</tr>
</thead>
<tbody>
#foreach ($users as $user)
<tr class="even pointer">
<td class=" ">{{ $user->id }}</td>
<td class=" ">{{ $user->name }}</td>
<td class=" ">{{ $user->name2 }}</td>
<td class=" ">{{ $user->email }}</td>
<td class=" ">{{ $user->birthday }}</td>
</tr>
#endforeach
</tbody>
</table>
setTimeout(function(){
$( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000);
<button id="refresh-btn">Refresh Table</button>
<script>
$(document).ready(function() {
function RefreshTable() {
$( "#mytable" ).load( "your-current-page.html #mytable" );
}
$("#refresh-btn").on("click", RefreshTable);
// OR CAN THIS WAY
//
// $("#refresh-btn").on("click", function() {
// $( "#mytable" ).load( "your-current-page.html #mytable" );
// });
});
</script>
How to refresh table contents in div using jquery/ajax
Use this package, its great and i use it all the time. Which is a laravel wrapper for datatables.net
Github DataTables
Example using jQuery. Note this is but one of 1000 ways to do this. This just outlines the basic idea of the process of building a table using AJAX and Laravel. It's not meant to be a drop-in code segment.
Basic table code
<table id="example" class="table">
<thead>
<tr class="headings">
<th>ID </th>
<th>first name </th>
<th>last name </th>
<th>E-mail </th>
<th>birthday </th>
</tr>
</thead>
<tbody>
<?php // empty for now ?>
</tbody>
</table>
tablecontents.blade.php
<?php // Requires the $users table ?>
#foreach ($users as $user)
<tr class="even pointer">
<td class=" ">{{ $user->id }}</td>
<td class=" ">{{ $user->name }}</td>
<td class=" ">{{ $user->name2 }}</td>
<td class=" ">{{ $user->email }}</td>
<td class=" ">{{ $user->birthday }}</td>
</tr>
#endforeach
AjaxController.php (or similar)
function getUpdatedTable() {
$users = //get users
return view("tablecontents", [ "users", $users ]);
}
JavaScript
function updateTable() {
$.ajax({
url: "ajax/getUpdatedTable",
success: function (data) {
$("#example tbody").html(data);
}
});
}
$(document).ready(function () {
updateTable();
setInterval(updateTable, 5000); //Re-update every 5 seconds
});
Like mentioned inside the comments, you can use frameworks like jQuery to build a real-time module.
$( document ).ready( function () {
$.get('generic-handler.php')
.done( function (data) {
$('#realtime').innerHTML = data;
});
});
Inside your PHP file you put your code to display the database and then you can wrap it in a setInterval so your request is sent every X number of seconds.
Documentation:
$.get - jQuery
setInterval - JS
Related
I have a table , when I will click on any of row when a new table should be stretched under the same . I tried to use accordian of ngx-bootrap but I failed.
Basically I need a expandable table inside table. When I will click to any of row I will call a service which will give data for expanding table.
Use this code to get the same table.
sample.component.html
<table class="table">
<tbody>
<ng-container *ngFor="let item of topItem; let i = index">
<tr>
<td width="5%" (click)="toggle(item, i)">
<i aria-hidden="true" class="fa fa-{{ i }}-icon" [ngClass]="{'fa-expand-icon': visible,'fa-compress-icon': !visible}"
></i>
</td>
<td width="20%">{{ item.Name }}</td>
<td width="15%">{{ item.mobile }}</td>
</tr>
<tr class="d-none row-num-{{ i }}">
<td *ngIf="showTable" colspan="2">
<div class="row">
<table class="table">
<tbody>
<tr *ngFor="let item of subsItem; let i = index">
<td>sample data</td>
<td>sample data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
Use typescript file sample.component.ts
toggle(item, index) {
let selector = `.row-num-${index}`;
document.querySelector(selector).classList.toggle('d-none');
this.showTable = true;
}
I have what seems to be a pretty straightforward list rendering situation but can't seem to get it to work. I have a component that when the mounted event fires sends an async call to an API to get data. Upon fetching the data, it sets the packages array with the value of the data. However, the list never actually renders in Vue. I've done this a number of times before without issue. Not sure what the problem is now.
Vue.component("tech-editing-queue", {
props: [],
data: function () {
return {
packages: []
};
},
template: `
<div>
<div class="table-responsive">
<table id="package-table" class="table table-striped">
<thead>
<tr>
<th>Package</th>
<th>Submitter</th>
<th>Status</th>
<th>Pages</th>
<th>Review Type</th>
<th>Description</th>
<th>Document Name(s)</th>
<th>Submission Date</th>
<th>Requested Due Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="package in packages">
<td>
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-duplicate"></span>
<span style="margin: 0px 6px;">{{ package.PackageName }}</span>
<span class="label label-primary" style="border-radius: 50%;">1</span>
</button>
</td>
<td>{{ package.Submitter.LastName }}, {{ package.Submitter.FirstName }}</td>
<td>
<h4 style="margin: 0px;">
<span class="label label-info">
{{ package.StateString }}
</span>
</h4>
</td>
<td>{{ package.Pages }}</td>
<td>{{ package.ReviewType }}</td>
<td>{{ package.DocumentType.Description }}</td>
<td><span>{{ package.DocumentNames }}</span></td>
<td><span>{{ package.SubmissionDate }}</span></td>
<td><span>{{ package.RequestedDueDate }}</span></td>
<td><button id="package-menu-7112" type="button" class="btn btn-link"><i class=" fa fa-ellipsis-h fa-1x undefined" aria-hidden="true"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
`,
mounted: function () {
fetch("/api/tech-editing-packages")
.then(res => res.json())
.then(response => this.packages = response)
.catch(error => console.log("Packages Error: ", error));
},
watch: {},
methods: {}
});
This packages list looks like this:
list view
The page looks like this after rendering.
page view
I expect the page to render the packages in table form but it doesn't.
I figured this out eventually. I inherited this project from someone else and they had several other javascript libraries being loaded other than Vue. After removing all the libraries other than the ones I needed specifically for my own code, it worked fine. Apparently another library was interfering. I'm not sure which at this point. Thanks for the help.
Try check if has items before redder the items:
<tr v-if="packages.length > 0" v-for="package in packages">
or
<tr v-if="packages[0].Submitter !== undefiend" v-for="package in packages">
I am generating a very simple table by binding a table to an array. And I use the contenteditable="true" so I can edit each cell data on the client side. Here is my code:
<table class="table">
<tr>
<th>Id</th>
<th>Value</th>
<th></th>
</tr>
<tr *ngFor="let item of keys">
<td>{{ item.id }}</td>
<td contenteditable="true">
{{ item.Value }}
</td>
<td>
<button type="button" (click)="printContent()" class="btn btn-primary">Print</button>
</td>
</tr>
</table>
How can I detect the text changes on the cell that has contenteditable set to true
I have this dynamic table:
<table id="thetable">
<tr>
<th class="th2"> Id </th>
<th class="th2"> Attivo </th>
<th class="th2"> Capacità </th>
<th class="th2"> Zona </th>
<th class="th2"> Stato </th>
</tr>
<tr style="cursor:pointer" ng-repeat="staffdispenser in staffdispensers">
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>
</tr>
</table>
I want to change td background for a specific row, that rows where "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5
This is my view:
I want something like that:
Have you ever heard of ngClass?
You can add it to your elements like this
<td ng-class="{'yellow-background': (count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections) < 0.5 }"></td>
Although your conditional is not syntactically valid. What is the 100 supposed to be?
count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)
Alfonso,
Consider looking here for an example of ngClass:
https://docs.angularjs.org/api/ng/directive/ngClass
You can apply this to the element to dynamically apply the class.
Example:
<tr style="cursor:pointer" ng-repeat="staffdispenser in staffdispensers" ng-class="{'special-row-color': staffdispenser.isMyCondition == true}">
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>
<td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>
</tr>
I would recommend making a function inside the controller for that conditional you want to apply.
First, I think you have way too much logic in your Angular {{ }} expressions, and you should offload that to a controller.
You said:
I want to change td background for a specific row, that rows where
"count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)"
is less than 0.5
So your <td> should look like this:
<td ng-class="getClass($index)">{{ myLogicHere }}</td>
And in your controller:
$scope.getClass = function(index) {
var value = count[index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections;
return value < .5 ? 'highlight-class' : '';
};
Of course, adjust to whatever values/properties/logic your controller has.
i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.
I have JSON like this :
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :
$http.get('Api/items').then(function(response)
{
$scope.items = response;
console.log(response);
});
and this is my table view :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
This is what happen when those all executed :
no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x[0].title }}</td>
<td>{{ x[0].description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
Where did i go wrong?? can someone help me??
It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :
$http.get('Api/items').then(function(response)
{
$scope.items = response.data;
console.log(response);
});
#digit already pointed the issue in you $hhtp call. Now For this JSON:
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
.
No need to give index number inside ng-repeat. //{{ x[0].title }}
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>