Button click not working in data-table bootstrap ionic 3 - ionic-framework

Question

I have created in data-table using bootstrap.
I have used data-table in ionic 3 website.
But problem was I use edit button in data-table
then first time it is working good .
After searching record it can not working click and not call method.
I'm get stuck please help me to solve this issue.
branch.html
<ion-content class="bgimg">
<ion-grid style="color: aliceblue">
<ion-row>
<ion-col col-8></ion-col>
<!--<ion-col col->-->
<!--</ion-col>-->
<ion-col col-2> <button float-end ion-button outline color="editcolor" style="color: white" (click)="addbranch()">Add</button></ion-col>
<ion-col col-1></ion-col>
</ion-row>
<ion-row>
<ion-col col-2></ion-col>
<ion-col col-8>
<div *ngIf="checkdatatable">
<table id="example12">
<thead>
<tr>
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);" width="20%">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize>Action</th>
</tr>
</thead>
<tfoot>
<tr >
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);" width="15%">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize width="20%">Action</th>
</tr>
</tfoot>
<tbody>
<tr style=" background:rgba(0,0,0,0.0); color: white;font-size: 16px" *ngFor="let item of branchlist" >
<td style="border: 1px solid rgba(255,255,255,0.5);">
<img src="{{item.image}}" height="100px">
</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.name}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.address}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.phone}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.pincode}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">
<!--<input type="hidden" id="idmain" value="{{item._id}}">-->
<button color="editcolor" ion-button (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" ion-button (click)="deletebranch(item._id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</ion-content>
branch.ts
import { Component } from '#angular/core';
import {
AlertController, IonicPage, LoadingController, NavController, NavParams, ToastController, ModalController,
App
} from 'ionic-angular';
import {WebserviceallProvider} from "../../providers/webserviceall/webserviceall";
import { Storage } from '#ionic/storage';
import {LoginPage} from "../login/login";
/**
* Generated class for the BranchesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
resposnsdata:any;
branchlist:any;
checkdatatable:boolean=false;
branchname = {name:''};
branchupdatedata = {name:''};
constructor(private storage: Storage,private app:App,public modalCtrl: ModalController,private alertCtrl: AlertController,private calldata:WebserviceallProvider,public navCtrl: NavController, public navParams: NavParams,public loadingCtrl: LoadingController,private toastCtrl: ToastController)
{
storage.get('token').then((val) => {
console.log('Your Token is', val);
if(val === null || val === "non")
{
this.app.getRootNav().setRoot(LoginPage);
}
});
this.getshow();
}
ionViewEnter(){
this.getshow();
}
myFunction(name) {
document.getElementById("demo").innerHTML =
"Welcome " + name;
}
getshow(){
//this.presentLoading();
this.calldata.branchlist().then((result) => {
this.branchlist = [];
this.resposnsdata = result;
console.log(this.resposnsdata);
this.branchlist = this.resposnsdata.data;
$(document).ready(function () {
// alert("call aklsdaklsd");
$('#example12').DataTable();
});
this.checkdatatable=true;
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 2000
});
loader.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad BranchesPage');
}
deletebranch(bid){
console.log(bid);
//this.presentLoading();
this.calldata.branchdelete(bid).then((result) => {
this.resposnsdata = result;
console.log(this.resposnsdata);
this.getshow();
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
addbranch() {
var modalPage = this.modalCtrl.create('MAddbranchPage');
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
updatebranch(id){
console.log("edit call");
var dataid = {
bid:id
};
var modalPage = this.modalCtrl.create('MEditbranchPage',{data:dataid});
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
}

Answer 1

ion-button only support in cordova, in other words, you must enable cordova for browser or just simple remove ion-button
<button color="editcolor" (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" (click)="deletebranch(item._id)">Delete</button>