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>

jQuery delete all table rows except the selected one?

I'm trying to come up with the best way to use jQuery to delete all the rows except for the one selected. I've done some searching and I've seen several posts about deleting all records or all records except the first or last row but nothing on deleting all but the one selected.
The scenario would be searching for a list of employees which would return maybe 5 records. Then there would be a "Select" button and when you click on that button it would remove all <tbody> rows except for that one. Actually from there my idea is to not only remove the rows but then to hide the "Select" button and display a text box as well as displaying a "Add" button below the table to add the employees with the item entered in the textbox.
I've thought about putting a hidden field on each row that has an row #, pass that row index to a jQuery function and then loop through all of the Tbody.Tr and remove if it doesn't match the row index passed in?
Another thought would be to put an Onclick on each of the "Select" buttons and then in the function use "this" to for reference to the row but then I don't know how to effectively say "remove all but $this row".
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.listEmployee)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button id="btnSelect" class="btn btn-sm">Select</button>
<input id="txtCaseNo" type="text" style="display:none;" />
</td>
</tr>
}
</tbody>
</table>

First ids need to be singular so id="btnSelect" is not going to work. Make it a class or name.
So select the TR and select the siblings and you can remove it.
$("tbody").on("click", "button", function() { //bind the click to the buttons
var button = $(this) //get what was clicked
$(this).closest("tr") //select the TR
.siblings() //get the other TRS
.remove() // um, remove them
button.hide() //hide your button
button.siblings().removeAttr('hidden') //show the input
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>A#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>B#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>C#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>D#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
</tbody>
</table>

Why not filter on your Model.listEmployee on the id of the selected row? This is assuming your current set up is reactive.
Ie:
const new_list = old_list.filter(item => item.id !== selected_id)

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>

How to move show entries column to below of datatables

i am trying to do the load on demand by using datatables on my mvc page
if you see in the picture, the show entries is on the top of the datatables
can i move the show 10 entries to the below of the showing 1 to 10 entries there?.
the following is my html code
<div class="dataTables_hideonload m-b-10">
<table class="table table-condensed table-vertical-middle table-layout-fixed table-noajax" id="tableCategoryList" width="100%">
<thead>
<tr>
<th class="text-left">Category ID</th>
<th class="text-left">Category Name</th>
<th class="text-left">Sort order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

You can re-position it by using:
"dom": '<"top"i>rt<"bottom"flp><"clear">'
Re-positioning reference

HTML table DnD event not triggered on border

I have this table on my html page:
<div class="col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="myTable">My Table</label>
<div id="myTable" class="table-border" ondragover="event.preventDefault()">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th class="text-muted">File Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
When I try to drag and drop draggable elements into this table, drop event is only triggered when I drop over table headers (File Name in this case), or the child rows if table is not empty:
$('#myTable').on('drop', function (e) {
e.preventDefault();
alert('dropped');
});
Any idea how can I make the entire border area droppable?
Thanks!