Develop Reference

How to create a scrollable table within Vue.JS with hundreds of records

So I currently have a working with table with buttons. However, I want to contain the records inside a table with a set size with a scrollable function to scroll through the table. this is my current code:
<template>
<div class="col">
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Account Number</th>
<th>Property Address</th>
<th>Client Name</th>
<th>Property Type</th>
<th>County Name</th>
<th>Purchased Amount</th>
<th>Purchased Year</th>
<th>Action(s)</th>
<th>View(s)</th>
</tr>
</thead>
<tbody>
<tr v-for="propertyForm in propertyForms" :key="propertyForm.PropertyID">
<td>{{ propertyForm.AccountNumber }}</td>
<td>{{ propertyForm.PropertyAddress }}</td>
<td>{{ propertyForm.Client_Name }}</td>
<td>{{ propertyForm.PropertyTypes }}</td>
<td>{{ propertyForm.CountyName }}</td>
<td>{{ propertyForm.PurchasedAmount }}</td>
<td>{{ propertyForm.PurchasedYear }}</td>
<!-- <td>{{ propertyForm.Notes }}</td> -->
<td>
<router-link :to="{name: 'edit-property', params: { id: propertyForm.PropertyID }}"
class="btn btn-success" style="margin-right: 4px;">Edit</router-link>
<button #click.prevent="deleteProperty(propertyForm.PropertyID)" class="btn btn-danger mx-2">Delete</button> <p></p>
</td>
<td>
<router-link :to="{name: 'protestByProperty', params: { id: propertyForm.PropertyID }}" style="height:38px;width:130.44px" class="btn btn-primary ">View Protests</router-link>
<router-link :to="{name: 'property-value', params: { id: propertyForm.PropertyID}}" class="btn btn-primary ">View Evaluations</router-link>
<router-link :to="{name: 'property-notes', params: { id: propertyForm.PropertyID}}" style="height:38px;width:136.44px" class="btn btn-primary ">Notes</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
I have tried table responsive and table overflow but I cannot seem to make it work. Either that or I am coding incorrectly. Thanks for the help!

In Table How to enable and disable Bootstrap Checkboxes with buttons in angular 9?

I am developing a page in an angular. I am not quite familiar in angular. I had spent few hours working on it and went through the maximum number of alternate threads regarding this issue. But couldn't find the solution that I was looking into.
specifically, I want to stress here I am using bootstrap checkboxes. I am not using ng-bootstrap.
Here are the queries I would like to address that are I am having.
When the page loads the buttons should be disabled until I click on the checkbox.
When I click on the checkbox in the header of the table it should enable all the checkboxes within the table and enable the buttons.
When I unchecked the checkbox in the header it should disable all other checkboxes and disable the buttons.
Below are the details that i had worked for my problem.
MyPage.html
<div id='bookstore'>
<table class="table table-responsive table-striped">
<thead class="th-color">
<tr>
<th><input name="select_all_books" type="checkbox" ></th>
<th class="theading">Book ID</th>
<th class="theading">Book Name</th>
<th class="theading">From Date</th>
<th class="theading">To Date</th>
<th class="theading">No of Days</th>
<th class="theading">Apply Date</th>
<th class="theading">Reason</th>
<th class="theading">Book Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of bookstore | paginate: { itemsPerPage: pageSize, currentPage: p}">
<td><input type="checkbox" id="rowcheckedbookstore"></td>
<td> {{data.BookId }}</td>
<td>{{ data.BookName }}</td>
<td>{{ data.BookStart | date:'dd-MM-yyyy' }}</td>
<td>{{ data.BookReturn | date:'dd-MM-yyyy' }}</td>
<td>{{ data.BookDays }}</td>
<td>{{ data.ApplyDate}}</td>
<td>{{ data.Reason }}</td>
<td>{{ data.BookStatus}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row paginator">
<div class="col-md-7">
<p> Showing {{ ((p - 1) * pageSize) + 1 }} to {{ pageSize * p }} of {{collectionsize }} </p>
</div>
<div class="col-md-5">
<pagination-controls (pageChange)="p = $event" ></pagination-controls>
</div>
</div>
<div class="container" style="padding-top: 30px;">
<div class="w3-show-inline-block">
<div class="w3-bar">
<button type="submit" id="allobook" class="btn btn-success" [disabled]="true" (click)="allowClick()" style="margin-right: 105px;float: right;">Allow</button>
<button type="submit" id= "rejectbook" class="btn btn-danger" [disabled]="true" (click)="rejectClick()" style="float: right;margin-right: 35px;">Reject</button>
</div>
</div>
</div>
MyPage.ts
export class MyPageComponent implements OnInit {
page = 1;
pageSize = 10;
p: number = 1;
collectionsize:any;
count: boolean;
bookslistdata:bookslist[];
constructor (private bookslist: BookService) { }
ngOnInit(): void {
this.bookslist.GetBooksData().subscribe(data=>{
this.bookslistdata = data;
this.collectionsize = data.length;
})
}
allowClick(){
alert('approve');
}
rejectClick(){
alert('reject');
}
I am able to disable the buttons on the page load. But I am unable to achieve when I try with the checkboxes. I would like to know how can I achieve?

When the page loads the buttons should be disabled until I click on the checkbox.
<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
The about code resolved the issue I am having ng-disabled.

Data passing by via #Input()

I have a question with data passing to component using #Input(). When i have a list component that contains some data. When i click edit an view button it loads some component. in my detailComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
And my update component same as detail. But detail component works fine. But update component receives no data. Here is i am opening modal:
<table
class="table table-striped table-bordered table=hover"
aria-describedby="page-heading"
>
<thead>
<tr>
<th scope="col"><span>Үүсгэсэн огноо</span></th>
<th scope="col"><span>Үүсгэсэн хэрэглэгч</span></th>
<th scope="col"><span>Шинэчилсэн огноо</span></th>
<th scope="col"><span>Шинэчилсэн хэрэглэгч</span></th>
<th scope="col"><span>Идэвхитэй</span></th>
<th scope="col"><span>Хугацаа</span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let serviceTimeGoal of serviceTimeGoals; let i = index">
<td>{{ serviceTimeGoal.createdAt | dateFormatPipe }}</td>
<td>{{ serviceTimeGoal.createdBy }}</td>
<td>{{ serviceTimeGoal.updatedAt | dateFormatPipe }}</td>
<td>{{ serviceTimeGoal.updatedBy }}</td>
<td>{{ serviceTimeGoal.enabled }}</td>
<td>{{ serviceTimeGoal.time }}</td>
<td class="text-right">
<div class="btn-group">
<button
type="submit"
(click)="
openModal(serviceTimeGoal, 'service-time-goal', $event)
"
class="btn btn-info btn-sm"
>
<i class="icon-eye"></i>
</button>
<button
type="submit"
class="btn btn-primary btn-sm"
(click)="
openModal(serviceTimeGoal, 'update-service-time', $event)
"
>
<i class="icon-pencil"></i>
</button>
<button
type="submit"
[routerLink]="[
'/service-time-goal',
{
outlets: {
popup: serviceTimeGoal.id.branchId + '/delete'
}
}
]"
replaceUrl="true"
queryParamsHandling="merge"
class="btn btn-danger btn-sm"
>
<i class="icon-bin"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Update component -->
<qms-modal id="update-service-time">
<qms-service-time-goal-update
[serviceTimeGoal]="serviceTimeGoal"
></qms-service-time-goal-update>
</qms-modal>
<!-- Detail component -->
<qms-modal id="service-time-goal">
<qms-service-time-goal-detail
[serviceTimeGoal]="serviceTimeGoal"
></qms-service-time-goal-detail>
</qms-modal>
And in my ts file:
openModal(serviceTimeGoal: IServiceTimeGoal, id: string, e: any) {
this.singleData = serviceTimeGoal;
this.modalService.open(id);
e.stopPropagation();
}
What am i doing wrong any advice ?
EDIT:
updateComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
ngOnInit() {
this.isSaving = false;
this.updateForm(this.serviceTimeGoal);
}
updateForm(serviceTimeGoal: IServiceTimeGoal) {
console.log(serviceTimeGoal);
this.editForm.patchValue({
cat: serviceTimeGoal.id.cat,
reg: serviceTimeGoal.id.reg,
loc: serviceTimeGoal.id.loc,
name: serviceTimeGoal.id.name,
tx1: serviceTimeGoal.id.tx1,
tx2: serviceTimeGoal.id.tx2,
tx3: serviceTimeGoal.id.tx3,
tx4: serviceTimeGoal.id.tx4,
createdBy: serviceTimeGoal.createdBy,
updatedBy: serviceTimeGoal.updatedBy,
enabled: serviceTimeGoal.enabled,
time: serviceTimeGoal.time
});
}
detailComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
Update:
Detail:

If you are going to share same data between multiple components, I think using a shared service will be more efficient. You can find some sample code snippets here.

How to use Bootstrap Datatables in Meteor JS

I used blaze templates in my meteor project. I coded all tables in blaze templates.
used Meteor/easy search package to search table data. and use kuronin pagination for the subscription base pagination.
Now I want to covert that tables to the data tables. What is the best way to do it?
This is my code base.
<table class="table table-hover am-customers-table-2" id="mytable">
<thead>
<tr>
<th width="20%"><label>Customer Name</label></th>
<th width="15%"><label>Phone Number</label></th>
<th width="35%"></th>
<th width="5%"></th>
<th width="10%"><label>Actions</label></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<!-- {{#EasySearch.Each index=searchCustomersIndex }} -->
{{#each documents}}
<tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}">
<td>
<div class="single-line-list-item">
<span class="number">{{getFirstLettersOfTheName name}}</span>
<div class="data">
<span>{{name}}</span>
</div>
</div>
</td>
<td>
<span>{{number}}</span>
</td>
<td>
</td>
<td>
</td>
<td>
{{#if flagStatus}}
<button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button>
{{else}}
<button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button>
{{/if}}
</td>
<td>
<button class="btn btn-sm btn-default" style="float: left">View Profile</button>
</td>
</tr>
<!-- {{/EasySearch.Each}} -->
{{/each}}
</tbody>
</table>

Can't you simply initialise the dataTable in .onRendered like so:
Template.onRendered(function () {
this.$('table.table').dataTable();
});

Angular js when i use http.get in a controller function then it is not rendering response data

I want to render the response of the http.get() function of angularJS, actually the problem is that when i use http.get in a controller function then it is not rendering response data.
View:
<div ng-app="myApp" ng-controller="dtlCtrl" >
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th> Name</th>
<th >Storage</th>
<th >Credits</th>
</thead>
<tbody>
<tr ng-repeat="a in credits" >
<td>{{ a.username }}</td>
<td>{{ a.storage }}</td>
<td>{{ a.credits }}</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
JavaScript:
app.controller('dtlCtrl', function($scope, $http) {
//var count;
//window.names=" ";
//count=0;
$scope.crd=function(name) {
// alert("http://localhost:8080/ZenCameraAdmin/admin/getusercredits?username="+name);
// count=1;
$scope.credits;
window.names=name;
//alert(window.names);
$http.get("http://192.168.0.87:8080/ZenCameraAdminServices/admin/getusercredits?username="+window.names)
.success(function (response) {$scope.credits = response.credits;
//console.log(response.plans);
});
//alert(window.names);
console.log($scope.credits);
return $scope.credits;
};
});