ANgular- Is it possible to add Mat-Paginator in regular table? - javascript

I made a regular HTML table in angular, whose data comes from API. I want to add mat-paginator in it.
This is my code:
<table class="table" style="text-align: center;">
<thead class="thead-light">
<tr>
<th></th>
<th style="font-weight: 800;">Points</th>
<th style="font-weight: 800;">Award Name</th>
<th style="font-weight: 800;">Country</th>
<th style="font-weight: 800;">Created At</th>
<th style="font-weight: 800;">Nominator</th>
<th style="font-weight: 800;">Visiblity</th>
<th></th>
</tr>
</thead>
<tbody *ngIf="newUserData">
<tr *ngFor="let data of newUserData; let i = index">
<td>
<div style="padding-left: 1.4rem;">
<input [(ngModel)]="radioSelected" class="form-check-input" type="radio" value="{{data.id}}">
</div>
</td>
<td>{{data.points}}</td>
<td>{{data.reason}}</td>
<td>{{data.countryName}}</td>
<td>{{data.createdAt | date : 'shortDate'}}</td>
<td>{{data.senderName}}</td>
<td>{{data.visibility}}</td>
<td>
<div class="d-flex" (click)="onRevoke(radioSelected)" style="cursor: pointer;" id="revoke" #revoke>
<svg-icon src="../../../../../assets/media/revoke_func.svg" [svgStyle]="{ 'width.px':18, 'height.px':12, 'fill':'#666666' }"></svg-icon>
<p style="color: #EB4987;">Revoke</p>
</div>
</td>
</tr>
</tbody>
</table>
Thanks in advance for the help

Yes it is possible with the help of MatTableDataSource, MatPaginator and Observable.
Please check the below stackblitz example I have created.
https://stackblitz.com/edit/angular-ivy-fauia1

Related

How to stop user from unchecking table checkboxes if adjacent column is not empty? [duplicate]

This question already exists:
How to stop user from unchecking checkbox if adjacent column is not empty? [closed]
Closed 8 months ago.
So, if the col 2 has anything, the user cannot uncheck that row's checkbox and an alert message would show up using alert()
Still a beginner and need a very appreciated direction.
Here's the HTML table and a Fiddle
<div class="col">
<div id="client-tasks" class="table-responsive"><br>
<div class="card" id="card">
<table class="table table-borderless table-hover" id="dtable">
<thead style="white-space: nowrap">
<tr>
<th style="width: 4%" class="text-center">Client ID</th>
<th style="width: 4%" class="text-center">Task No</th>
<th style="width: 24%" class="text-center">Request Approval</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">001</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">1</td>
<td style="text-align:'center'vertical-align:'middle';"><input type="checkbox" title="Request Approval" name="rowcheckbox" value="true" checked=""></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">001</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
<td style="text-align:'center'vertical-align:'middle';"><input type="checkbox" title="Request Approval" name="rowcheckbox" value="false"></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">001</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">3</td>
<td style="text-align:'center'vertical-align:'middle';"><input type="checkbox" title="Request Approval" name="rowcheckbox" value="true" checked=""></td>
</tr>
</tbody>
</table>
</div><br>
</div>
</div>
I've tried adding disabled="disabled" as an attribute to the checkbox when building the table, but that just doesn't work on Google Apps Script.
Appreciate your help

How to delete table rows uisng javascript

I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>
If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}
try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>

How is it possible to add rows and columns to a table by jQuery?

I have the following table on my page:
<section class="content">
<div class="box">
<div class="box-header with-border">
<div class="row margin-bottom-20">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-end">
<i class="fa fa-plus"> </i>New
</div>
</div>
</div>
</div>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tbody>
</table>
</section>
I need to insert rows and columns into this table via javascript. I tried something like:
$('#QueryTable').find('tr').each(function(){
$(this).find('th').eq(n).after('<th>Test </th>');
});
I also tried
$('#QueryTable tr').append('<th>Test</th>')
I also tried 02:
$('#QueryTable tr').each(function()
{
$(this).append('<th>Test</th>');
});
But these codes did not insert a row or column in my table. How do I add rows and columns by javascript (pure or jquery)?
Here is a simple example. I first fixed your table so that your cells are inside a row:
//adds the new column
$('#QueryTable thead tr').append('<th>Test</th>');
//adds a new cell to all existing rows (this assumes that the newly added column does not exist)
//at initialization
$('#QueryTable tbody tr').each(function() {
$(this).append('<td>New Cell</td>');
});
//Adds a new row
$('#QueryTable tbody').append('<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<tr>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tr>
</tbody>
</table>

ng-repeat used to display data, when data is updated via the save button, how do I update the ng-repeat without updating the entire page?

This is the div that contains the HTML with the list:
<div id="searchResults" class="container-fluid">
<table ng-show="HasMyData()" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="text-center smalltext bold">Version</th>
<th class="text-center smalltext bold">City</th>
<th class="smalltext bold">Description</th>
<th class="text-center smalltext bold">Food</th>
<th class="text-center smalltext bold">Lizard</th>
<th class="text-center smalltext bold">Lost</th>
<th class="text-center smalltext bold">Complete</th>
<th class="text-center smalltext bold">Active</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;" ng-class="{ selectedrow: isSelectedReg($id) }" ng-click="GetDetails(data,$id)" ng-show="numberOfRecords != 0"
ng-repeat="data in myData |
filter:{'name':FilterByDescription(search.val)} |
filter:{'isFood':FilterIsFood} |
filter:{'isLizard':FilterIsLizard} |
filter:{'isLost':FilterIsLost} |
filter:{'reviewCompleted':FilterByComplete()} |
filter:{'activeInd':FilterByInactive() }">
<td class="text-center smalltext">{{data.versionNumber}}</td>
<td class="text-center smalltext">{{data.cityName}}</td>
<td class="smalltext">{{data.name}}</td>
<td class="text-center"><input type="checkbox" ng-checked="data.isFood" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLizard" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLost" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.reviewCompleted" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.activeInd" disabled></td>
</tr>
<tr ng-show="numberOfRecords == 0">
<td colspan="5">NO RECORDS FOUND</td>
</tr>
</tbody>
</table>
</div>
The data is updated via a form, and then the above div/ng-repeat should be reloaded after the update. I've read a few posts that say it should be automatic...but it's not happening.

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

Categories