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>

Datatable Jquery based plugin - table - issues with collapsible in table - Javascript/HTML

I need to create a web-based table of grants focused on access to care that can be filtered and sorted by results. Although I've never really worked much with Javascript (a little with HTML a long time ago), I've been able to complete most of my objective through the use of the Jquery DataTable plugin. I would like to provide our users with the option to hit a collapse button to review the abstract (which is oftentimes 1000 characters) if they want to find additional details.
I've been on Stackoverflow for a long time and I know it's expected to at least make an attempt, which I did. Sadly, I know I'm off. I am grateful for any help here, since once I get this to work, I'm done with this project!
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Project Name</th>
<th>Project Number</th>
<th>PI(s)</th>
<th>End Date</th>
<th>Organization</th>
<th>Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
<div id="demo" class="collapse">Abstract language example 2.</div>
</
</td>
<tr>
<td>Access to Specialty Dental Care - Racial Disparities</td>
<td>R01-234i482</td>
<td>John Summerton, MD</td>
<td>1/1/2020</td>
<td>AHRQ</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
<div id="demo" class="collapse">Abstract language example 1.</div>
</
</td>
</tr>
</tbody>
</table>

Here is a demo using DataTable responsive plugin
control classes
all - Always display
none - Don't display as a column, but show in the child row
never - Never display
control - Used for the column responsive.details.type option.
So, the last th in the header must have class="none"
responsive.details.target
This can be one of an column index, or a jQuery selector
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
type: 'column',
target: '.collapse'
}
},
columnDefs: [{
orderable: false,
targets: 5
}],
});
});
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th class="all">Project Name</th>
<th class="all">Project Number</th>
<th class="all">PI(s)</th>
<th class="all">End Date</th>
<th class="all">Organization</th>
<th class="all">Abstract</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
</td>
<td>Abstract language example 2.</td>
</tr>
<tr>
<td>Access to Specialty Dental Care - Racial Disparities</td>
<td>R01-234i482</td>
<td>John Summerton, MD</td>
<td>1/1/2020</td>
<td>AHRQ</td>
<td>
<button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
</td>
<td>Abstract language example 1.</td>
</tr>
</tbody>
</table>

You can use jQuery to hide() and show() elements using these functions or you can use toggle()
$(document).ready(function() {
$('#example').DataTable();
$('#demo').toggle();
});
function myFunction(){
$('#demo').toggle();
}
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Project Name</th>
<th>Project Number</th>
<th>PI(s)</th>
<th>End Date</th>
<th>Organization</th>
<th>Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example" onclick="myFunction()">Simple collapsible</button>
<div id="demo" class="collapse" >Abstract language example 2.</div>
</td>
</tr>
</tbody>
</table>
</body>

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/

materialize: make table row accordion header

I am trying to use materialize to create a table that allows for each table row to be clickable. Clicking on a row should expand an accordion under the row that holds more data for the row. I can not seem to get the accordion to open or set the whole as the header for the accordion. I have tried adding the classes straight to the tr's as well as wrapping each tr in a div. neither solution gave the right behavior. Here is the code I currently have:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script type="text/javascript">
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr class="collapsible" data-collapsible="accordion">
<td class="collapsible-header">Alvin</td>
<div class="collapsible-body">
<p>
hello
</p>
</div>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>

The Materialize Collapsible needs to be configured on an li element.
Try this:
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">Alvin</div>
<div class="collapsible-body">
<p>
hello
</p>
</div>
</li>
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
The layout is not so good, but works as you expect.
If you are using Materialize just for the collapsible, I suggest you use another component, like Bootstrap Collapse