Load the data to table and remove the old rows - javascript

i'm using a bootstrap table and need to load new data each time I click on a button, I don't want to keep old data.
I could load data using this below code but old data still there, I tried "load" instead of append like this $('#matable tbody').load(rows); it doesn't work
var rows = $("<tr><td style=\"display:none;\">1</td><td>E</td><td>E</td><td>E</td></tr>");
$("#Mybutton").click(function()
$('#matable tbody').append(rows);
});
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="matable" class="table table-striped table-bordered first">
<thead>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>

Related

Bootstrap Modal with foreach loop. How can pass the foreach argument?

I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>
Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.

Jquery Datatable issue with bootstrap 4 modal

Currently i have a datatable like this,
https://prnt.sc/nbfmge
I am opening bootstrap 4 modal when a user click on no of items, it open will
https://prnt.sc/nbfmrj
But i am not getting search and pagination functionality when datatable is in modal. Here's my code
Here's HTML code:
<!-- Modal body -->
<div class="modal-body">
<div class="card">
<div class="card-header">
<h5 class="card-title float-left">List of items</h5>
</div>
<div class="card-body row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered display" id="datatables">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item Name</th>
<th scope="col">Item Model</th>
<th scope="col">Item Year</th>
<th scope="col">Item Condition</th>
<th scope="col">Item Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="showEmployeesReportItems">
<!-- List of Items -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
And this is my jquery code:
$('#datatables').DataTable().destroy();
$('#showEmployeesReportItems').html(html);
$('#datatables').DataTable();
How can i get pagination and search feature in modal datatable ?
Got a solution, change id="datatables" bootstrap modal body id to 2, 3 or any number and also change this here $('#datatables2').DataTable(); Now the Jquery datatable will also work fine with bootstrap modal.

How to delete column in html from javascript

I have a table and I want to delete a column when Variables.Product.URUN_KOD == '310' I can delete this row first get to 310 but get the second time it deletes automatically first column's last element you can see in the picture. Thanks
$("#SigortaliCustomerDataTable tr").find('td:eq(5),th:eq(5)').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-group-sm">
<div class="col-sm-12">
<hr />
<table class="table table-striped table-bordered" id="SigortaliCustomerDataTable">
<thead>
<tr>
<th>Müşteri No</th>
<th>Ad Soyad</th>
<th>TCKN/VKN</th>
<th>Yazışma Adresi</th>
<th>İletişim</th>
<th style='width:50px'>Pay</th>
<th style='width:50px'></th>
<th style='width:50px'></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
You can remove the remove by using this code. No need of any iteration:
$("#SigortaliCustomerDataTable tr").find("th:eq(5), td:eq(5)").remove();
Please check this fiddle I created for you: https://jsfiddle.net/2cqow1y5/

DataTable not refreshing in angular

<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table

how to fill a data table in html from db using php

i want to replace a java script with php to fill the data table from the db
or just how to fill this table from the mysql db using php.
here is the datatable :
alladmins.php :
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Admins</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="adminTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>ADMIN ID</th>
<th>USER NAME</th>
<th>Password</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="ad">
</tbody>
<tfoot>
<tr>
<th>ADMIN ID</th>
<th>USER NAME</th>
<th>Password</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.col -->
<script>createTable('#adminTable');</script>
this is the script in the index.php :
<script>
var createTable = function(el){
if ( $.fn.DataTable.isDataTable(el) ) {
$(el).DataTable().destroy();
}
// table: "#adminTable",
$(el+' tbody').empty();
var arrayOfAdmins = [{id:1,username:"asdasd",password:"asd"},
{id:1,username:"asdasd",password:"asd"}];
for (i=0; i<arrayOfAdmins.length;i++){
$("#adminTable").append(
'<tr><td>'+ arrayOfAdmins[i].id
+'</td><td>'+ arrayOfAdmins[i].username
+'</td><td>'+ arrayOfAdmins[i].password
+'</tr>'
);}
$(el).DataTable();
};
$('.tableSearch').val('a').trigger('#adminTable');
$(document).ready(function(e){
var navigate = function(location){
$('#appMain').load(location,function(){
});
};
/* NAVIGATION */
$('ul.treeview-menu a').on('click',function(e){
e.preventDefault();
var location = $(e.target).attr('href');
navigate(location);
});
navigate('templates/index2.php');
});
</script>

Categories