i'm using this plugin https://l-lin.github.io/angular-datatables/#/advanced/rerender for could use datatable in angular, i have a form for search data, it'll be show in table, the problem is when i do many search, the table update with the new data but also show data of searches before.
Some idea to clear data before update with the new data.
I'm using this code for my dattables.
#ViewChild(DataTableDirective, { static: false })
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<DataTableDirective> = new Subject();
ngAfterViewInit(): void {
this.dtTrigger.next();
}
ngOnDestroy(): void {
// Hay que dessuscribirse del evento dtTrigger, para poder recrear la tabla.
this.dtTrigger.unsubscribe();
}
//----------------------------------------------------
// ReDraw Datatable
reDraw(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destruimos la tabla
dtInstance.destroy();
// dtTrigger la reconstruye
this.dtTrigger.next();
});
}
Here, i call the function to update datatable with de new data.
this._investigadorGrupoService.find(this.InvestigadorGrupo).subscribe((result: any) => {
this.reDraw();
this.ListInvestigadores = result;
this.bSearchActive = true;
$('#processing').addClass("escondido");
});
this is my HTML
<table id="dtDataTable" datatable [dtOptions]="dtOptions" class="row-border hover" [dtTrigger]="dtTrigger" style="width:100%">
<thead>
<tr>
<th>Acciones</th>
<th>Nombre</th>
<th>Facultad</th>
<th>Nombre Grupo</th>
<th>Es Lider</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of ListInvestigadores">
<td>
<a class="btn btn-warning text-white" (click)="onEdit(i.investigador)">
<span [innerHTML]="Tools.GetIconEdit() | safe: 'html'"></span>
</a>
</td>
<td>{{i.investigador.nombres}} {{i.investigador.apellidos}}</td>
<td>{{i.grupo.facultad.nombre}}</td>
<td>{{i.grupo.nombre}}</td>
<td>{{i.esLiderGrupo ? 'Si': 'No'}}</td>
<td>{{i.investigador.email}}</td>
</tr>
</tbody>
</table>
Thanks for your support
reDraw(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.clear().draw(); // Add this line to clear all rows..
dtInstance.destroy();
// dtTrigger la reconstruye
this.dtTrigger.next();
});
}
Related
I didn't get the issue here.
When I use
return window.location.href = 'https://www.google.com';
it works fine.
However, if I use my string variable. It doesn't work.Reloads back to page.
return window.location.href = this.navigationURL;
Full code:-
<table class="">
<tr
class="cursor-pointer"
v-for="currentView in authenticationMethodsAvailable"
:key="currentView.id"
>
<td class=""> (HERE)
**<button type= "button" #click="authenticationChoice(currentView['name'])" >**
<img
class="w-12 inline-block align-middle"
:src="showAuthenticationIcon(currentView['gitType'])"
/>
</button>
</td>
</tr>
</table>
The function being triggered
authenticationChoice(recieved) {
this.$store.state.gitSourceAuthenticationChoice = recieved;
this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
this.navigationURL = response["oauth2_redirect"];
console.log(this.navigationURL)
});
return this.navigationURL ;
// return window.location.href = String(this.navigationURL);
},
Remove the return which's breaking the code and move the code inside the then block as follows :
authenticationChoice(recieved) {
this.$store.state.gitSourceAuthenticationChoice = recieved;
this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
this.navigationURL = response["oauth2_redirect"];
console.log(this.navigationURL)
window.location.href = String(this.navigationURL);
});
},
I'm using vue to create a page where I list all users and if I click on the edit button the details of that user then gets shown
next to the list.
What I'm trying to do is, if I update a user and click save then the user details in the list needs to change.
The problem I'm having is that I'm not able to get the details to change in the list after I've saved.
My vue
<template>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-sm mt-2">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="user in displayAllUsers">
<td>{{ user.name }}</td>
<td>
<button class="btn btn-sm btn-success" #click="manageUser(user)">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5" v-if="user != null">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Manage {{ user.name }}</h4>
</div>
<div class="card-body">
<table class="table">
<tr>
<th>Name</th>
<td>
<input type="text" v-model="user.name">
</td>
</tr>
</table>
</div>
<div class="card-footer">
<button #click="updateUser()"class="btn btn-success"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
data: function () {
return {
users: [],
user: null
}
},
computed: {
displayAllUsers(){
return this.users;
}
},
methods: {
manageUser(user){
axios.get('/admin/user/'+user.id).then((response) => {
this.user = response.data.user;
});
},
updateUser(){
axios.put('/admin/user/'+this.user.id, {
name: this.user.name
}).then((response) => {
this.users = response.data.user;
});
}
},
mounted() {
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
}
}
</script>
There are two possible solutions.
The first is to run this code at the end of the updateUser method:
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
The second is to use a state manager like Vuex.
The first scenario will fetch again your users data from the remote API and will update your view with all your users.
With the second scenario, you will handle your application state way much better than just using the data attribute of your page module, but in the background, it is more or less the same as the first solution I suggest.
To update the current user only in the table you could do something like that at the end of the updateUser method:
let userIdx = -1;
for(let idx = 0, l = this.users.length; idx < l; idx++) {
if ( this.user.id === this.users[idx].id ) {
userIdx = idx;
break;
}
}
if ( -1 !== userIdx ) {
this.users[userIdx] = this.user;
this.user = {};
}
Other than your problem, it seems like you don't need this code:
computed: {
displayAllUsers(){
return this.users;
}
},
You could remove this code, and instead use this code in the HTML part:
<tr v-for="user in users">
For your updateUser function you could just return the modified user in the same format that you have for all the users in you user list and update the user by index. This is presuming that the user you want to update is in the users array to start with.
updateUser() {
axios.put('/admin/user/'+this.user.id, {
name: this.user.name
}).then((response) => {
const updatedUser = response.data.user;
// Find the index of the updated user in the users list
const index = this.users.findIndex(user => user.id === updatedUser.id);
// If the user was found in the users list update it
if (index >= 0) {
// Use vue set to update the array by index and force an update on the page
this.$set(this.users, index, updatedUser);
}
});
}
This could be a good starting point.
Unrelated Note:
You can add your mounted function code to its own method, for example
getUsers() {
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
}
then
mounted() {
this.getUsers()
}
this makes it a little cleaner and easier if you ever need to get the users again (example: if you start having filters the user can change)
As it could get more complex vuex would be a great addition.
Below is REACT code for details page
Ticket is a primary object, and what i want to do is when downloading add the ticket name as .pdf filename.
So i need a solution to pass the concrete ticket name to the handleDownload function
In the render section there are no problem declaring ticket.ticketName etc. But with onClick the problem arises.
type TicketProps =
TicketStore.TicketState &
typeof TicketStore.actionCreators &
RouteComponentProps<{ticketId: string}>;
class Ticket extends React.PureComponent<TicketProps> {
public componentDidMount() {
this.ensureDataFetched();
}
private ensureDataFetched(){
this.props.requestTicket(+this.props.match.params.ticketId);
}
handleDownload = () =>{
Axios.get(`${apiUrl}/api/tickets/download/${this.props.match.params.ticketId}`,{responseType: 'arraybuffer',
headers: { "Content-Type": 'application/pdf' }
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', "test"+.pdf");
document.body.appendChild(link);
link.click();
});
}
public render() {
let ticket = this.props.ticket;
if(this.props.isLoading){
return <span>Laen andmeid...</span>;
}
if (ticket === undefined) {
return <h1>Piletit ei leitud</h1>;
}
let name = ticket.ticketName
return (
<React.Fragment>
<h3>Üritus: {ticket.ticketName}</h3>
<Table striped hover size="sm">
<tbody>
<tr>
<td className="details">Asukoht:</td>
<td>{ticket.eventLocation}</td>
</tr>
<tr>
<td className="details">Kuupäev:</td>
<td>{ticket.eventDate}</td>
</tr>
<tr>
<td className="details">Lisainfo:</td>
<td>{ticket.extraInfo}</td>
</tr>
<tr>
<td className="details">Pilet:</td>
<td>{ticket.pdfTicket}</td>
</tr>
</tbody>
</Table>
<Button onClick={this.handleDownload}>Lae alla</Button>
<Popup trigger={<button className="btn btn-primary">Show location on map</button>} position="bottom left">
<div><Maps aadress={ticket.eventLocation}></Maps>></div>
</Popup>
<Link to='../tickets'>
<Button color='primary' onClick={()=>{}}>
Tagasi
</Button>
</Link>
<br></br>
</React.Fragment>
);
}
}
export default connect(
(state: ApplicationState) => state.ticket,
TicketStore.actionCreators
)(Ticket as any);
I am getting parsing error after ticket?
Any thoughts?
Thanks
Use the following code without the question marks:
<Button onClick={()=>{this.handleDownload(ticket.id,ticket.ticketName)}}>Lae alla</Button>
The solution was to add
if(this.props.ticket===undefined){
return //something;
}
Before using the object.
Hi I'm working on the angular 2 inserting updating and deleting a row in angular 2.
In ngFor I am binding the data to the table.
I had created the update button in the ngFor loop.
On click of the particular rows "Update" button, I needs only that row to get with textboxes instead of all rows.
Unfortunately i'm getting for all records.
I knew its because of the property binded to all rows.
But how can I overcome to make sure that only particlular clicked row to get with edit mode like text boxes.
My code was like below :
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public enableEdit = true;
showcreate: boolean=false;
public items=[];
public FirstName="";
public LastName="";
public MobileNumber="";
public PinCode="";
public City="";
public CollageName="";
public Percent="";
public conformdelete;
public edit = false;
public btncreate =false;
public indexVal:any;
constructor(){
if(localStorage.getItem("items"))
this.items = JSON.parse(localStorage.getItem("items"))
}
delete(index){
if(confirm("Are you sure you want to delete this item?") == true){
this.items.splice(index,1);
localStorage.setItem("items",JSON.stringify(this.items))
}
}
update(event, index){
debugger;
console.log(event);
console.log(index);
this.enableEdit = false;
}
save(index){
// console.log("save",i)
// this.indexVal = i;
this.enableEdit = true;
}
cancel(){
this.enableEdit = true;
}
btnsubmit(){
this.items.push({
"FirstName":this.FirstName,
"LastName":this.LastName,
"MobileNumber":this.MobileNumber,
"PinCode":this.PinCode,
"City":this.City,
"CollageName":this.CollageName,
"Percent":this.Percent
})
localStorage.setItem("items",JSON.stringify(this.items))
}
}
app.component.html :
<table border="2">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>MobileNumber</th>
<th>PinCode</th>
<th>City</th>
<th>CollageName</th>
<th>Percent</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of items; let index = index">
<td><input *ngIf="!enableEdit" [(ngModel)]="i.FirstName"> <span *ngIf="enableEdit">{{i.FirstName}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.LastName"> <span *ngIf="enableEdit">{{i.LastName}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.MobileNumber"> <span *ngIf="enableEdit">{{i.MobileNumber}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.PinCode"> <span *ngIf="enableEdit">{{i.PinCode}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.City"> <span *ngIf="enableEdit">{{i.City}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.CollageName"> <span *ngIf="enableEdit">{{i.CollageName}}</span></td>
<td><input *ngIf="!enableEdit" [(ngModel)]="i.Percent"> <span *ngIf="enableEdit">{{i.Percent}}</span></td>
<td>
<button *ngIf="enableEdit" (click)="delete(index)">Delete</button>
<button *ngIf="enableEdit" (click)="update($event,index)" class="update">Update</button>
<button *ngIf="!enableEdit" (click)="save(index)">save</button>
<button *ngIf="!enableEdit" (click)="cancel(index)" >cancle</button>
</td>
</tr>
</tbody>
</table>
The issue is, when one of your row button is clicked, since the "enableEdit" condition is universal for all rows, it gets reflected to all rows. One of the possible solution is to add an extra key-value pair to your table array, so that you can make use of each row , by using its index.
Example :
in your component.ts,
constructor(){
if(localStorage.getItem("items"))
this.items = JSON.parse(localStorage.getItem("items"));
/* add an extra key value pair named "edit", and initially set it to false. So all the rows will be showing "Delete" and "Update" buttons initially */
this.items.forEach(function (eachItem){
eachItem.edit = false;
});
}
/* function for update or cancel functionalities */
updateCancel(event, index,action:string){
this.items[index].edit = true; /* selects the items with index number and swaps the buttons*/
if(action == "cancel"){
this.items[index].edit = false;
}
}
/* function for save or delete functionalities */
saveDelete(index, action:string){
this.items[index].edit = false;
if(action == "delete"){
if(confirm("Are you sure you want to delete this item?") == true)
{
this.items.splice(index,1);
this.items[index].edit = true;
localStorage.setItem("items",JSON.stringify(this.items))
}
}
}
In your app.component.html file, change the button area td with new function names and if condition
<td>
<button *ngIf="!i.edit" (click)="saveDelete(index,'delete')">Delete</button>
<button *ngIf="!i.edit" (click)="updateCancel($event,index,'update')" class="update">Update</button>
<button *ngIf="i.edit" (click)="saveDelete(index,'save')">Save</button>
<button *ngIf="i.edit" (click)="updateCancel($event,index,'cancel')">cancel</button>
</td>
This solution worked for me. Thanks.
i am trying to filter from multi dimensional array in vue js.
first i am storing response from axios in a variable like
fetchUsersDetails() {
var vm = this;
axios.get('school/api/user',{headers: getHeader()}).then(response => {
Vue.set(vm.$data, 'userList', response.data.data)
//console.log(this.userList)
})
},
on doing console.log(this.userList) iam getting
0:{
name:rajesh
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:1
session_id:1
}
}
}
1:{
name:rohan
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:1
session_id:1
}
}
}
2:{
name:rahul
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:2
session_id:1
}
}
}
3:{
name:ramesh
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:3
session_id:1
}
}
}
and so on...
now in html
<table class="table">
<tr>
<th style="display: none">Id</th>
<th>Sl. No.</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display: none">Id</th>
<th>Sl. No.</th>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr v-for="(studentDetails, index) in filterUserLists">
<td style="display: none">{{studentDetails.user_token}}</td>
<td>{{index+1}}</td>
<td>
<a #click="showModal(studentDetails)" data-toggle="modal" data-target="#showModal" >{{studentDetails.first_name}}</a>
</td>
</tr>
</tbody>
and i am filtering my userList
filterUserLists: function () {
if(this.userList)
{
var list= this.userList
.filter(item => item.student_session.class_id==="1" )
}
console.log(list)
},
but i am getting empty list on my console though in my userList student_session is present with all values
i am new to vue js, so please help me
thankx in advance...
you can use computed
computed: {
filterUserLists () {
var filtered = [];
for (var i = 0; i < this.userList.length; i++) {
if (this.userList[i].student_session.class_id == "1") {
filtered.push(this.userList[i]);
}
}
return filtered;
}
}
This seems to be rather a problem with your filter because you try to access the secound array directly.
For me it worked with
userList.filter(item => item.student_session[0].class_id===1 )
and
userList
.filter(item => item.student_session
.filter((item2 =>item2.class_id===1 )) )
Or just use two loops like everyone does for a two dimensional array.
for(var i =0; i < userList.length; i++){
...
for(var j=0; j < userList[i].student_session.length; j++){
if(userList[i].student_session[j].class_id===1){
...
}
}
}
If you declared filterUserList unter methods you have to use it as function in the v-for
<tr v-for="(studentDetails, index) in filterUserLists()">
You try to access the properties .user_token and .first_name but these are never declared.