We Keep Coding

Load the data to table and remove the old rows

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>

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.

Resizing window function doesn't work when I use JavaScript to click a Bootstrap tab link

Here's a birds eye view of what I'm trying to accomplish, and for the most part it works. I'm trying to make my table behave like an Excel sheet where the headers stay in place as you scroll.
So I created a table with just headers and then each tab has tables in them. When the page first loads, it will grab the size of each column and make my headers tables (hTable) columns match the widths. When the browser is resized it fires of that function so everything matches. Everything is working perfectly like I need it to.
The problem now comes when I try to click on a tab using jQuery. For some reason, that line breaks the resizing code. I've placed the click function at the bottom of the page, at the top, in the $(function), outside of the function. That 1 single line of code breaks my resizing function and I can't figure out why.
Below you will find my code and the structure of my code. I've removed the content of the tables but the structure is still the same.
<html>
<head>
<script type="text/javascript">
//<![CDATA[
var curTab = 'E';
$(function(){
hTableResize();
$(window).resize(hTableResize);
$('#tab-'+curTab).click(); // *** THIS BREAKS THE FUNCTIONALITY ***
}); //$(function){}
function hTableResize(){
$('.cTable thead').hide();
var col1 = $('.cTable td:eq(0)').width();
var col2 = ($('.cTable td:eq(1)').width());
var col3 = ($('.cTable td:eq(2)').width());
var col4 = $('.cTable td:eq(3)').width();
$('.hTable').css('width',col1+col2+col3+col4+'px !important');
$('.hTable th:eq(0)').width(col1);
$('.hTable th:eq(1)').width(col2);
$('.hTable th:eq(2)').width(col3);
$('.hTable th:eq(3)').width(col4);
}
//]]>
</script>
</head>
<body>
<div id="contenContainer">
<p><span style="font-size:larger;"><b>Clients</b></span><br>
+ Add Client</p>
<ul class="nav nav-tabs" role="tablist" style="margin-top:7px; background-color:#ffffff; width: 100%;">
<li role="presentation" class="" id="tA">A</li>
<li role="presentation" id="tB">B</li>
<li role="presentation" id="tC">C</li>
<li role="presentation" id="tD">D</li>
<li role="presentation" id="tE">E</li>
<li role="presentation" id="tF">F</li>
</ul>
<table class="table-bordered table-hover table-striped hTable">
<tbody><tr style="background-color:#ffffff;">
<th nowrap="" style="text-align: center; width: 82px;">Code</th>
<th nowrap="" style="width: 0px;">Client Name</th>
<th style="text-align: center; width: 184px;">Sub</th>
<th nowrap="" style="text-align: center; width: 149px;">Consignor/Consignee <br>
Required</th>
</tr>
</tbody></table>
<div style="overflow-y: scroll; height:100%;">
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="secA">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secB">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secC">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secD">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secE">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secF">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
</div>
</div> <!-- <div style="overflow-y: scroll;"> -->
</div>
</body>
</html>

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

JS JQuery Bootstrap datatables resize

Hi I have a datatable that displays 10 columns but the problem is it dont fit the screen properly. I still need to scroll horizontally and vertically to see the other columns/rows. What I want to do is to make the table smaller. How can I achieve that? Refer to the screenshots here and here . I have tried setting table width = "100%" but unfortunately nothing happens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Member
</button>
<br /> <br /> <br />
<table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Contact Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Per the HTML spec, a <table> and its children are auto-sized. Put simply, other rules are thrown out the window to make the table itself look good, by default.
Bootstrap does have an answer for this, with responsive tables. Just add the table-responsive class to your table element and it'll handle any scrollbars within the table rather than allowing your entire page to scroll.
<table class="table table-responsive">
...
</table>