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!

How do I get my delete function to work in Vue JS?

I am in the process of developing a website and I have run into a few problems. I am very new to coding so pardon my novice, but I am having a hard time creating a functional delete user button. When I click delete, It takes me to the delete url, but does not delete from my home table or mysql database. If any advice could be spared it would be greatly appreciated. Here is the code that should pertain to the question.
Home Page Table;
<template>
<div class="between:flex bottom:margin-3">
<div class="center: flex-items">
<span class="right:margin-1">Show</span>
<select v-model="currentEntries" class="select" #change="paginateEntry">
<option v-for="se in showEntries" :key="se" :value="se">
{{ se }}
</option>
</select>
<span class="left:margin-1">Entries</span>
<div class="end:flex"></div>
</div>
</div>
<div id="tableHolderDiv">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Location</th>
<th scope="col">End User</th>
<th scope="col">Order Number</th>
<th scope="col">Date</th>
<th scope="col">Application</th>
<th scope="col">Service Tech</th>
<th scope="col">Department</th>
<th scope="col">Hours</th>
<th scope="col">Travel Hours</th>
<th scope="col">Contact Name</th>
<th scope="col">Reason</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in serviceEntries"
:key="row.id"
#click="alertID(row.id)"
>
<th scope="row">{{ row.id }}</th>
<td>{{ row.location }}</td>
<td>{{ row.end_user }}</td>
<td>{{ row.order_number }}</td>
<td>{{ row.date }}</td>
<td>{{ row.application }}</td>
<td>{{ row.service_tech }}</td>
<td>{{ row.department }}</td>
<td>{{ row.hours }}</td>
<td>{{ row.travel_hours }}</td>
<td>{{ row.contact_name }}</td>
<td>{{ row.reason }}</td>
<a
href="/delete/{{this.id}}"
type="button"
class="btn btn-light btn-small"
onclick="event.stopPropagation(); return confirm('Are you sure you want to delete this entry?');"
><i class="bi bi-trash"></i> Delete</a
>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "ServiceTable",
computed: {
serviceEntries() {
return this.$store.state.serviceEntries;
},
},
methods: {
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
};
</script>
The only Delete Call; in my app.js
app.delete("/api/service/:id", (req, res) => {
// console.log("DELETE /api/user/" + req.params.id + " called");
pool.query(
"DELETE FROM `master` WHERE id = ?",
[req.params.id],
function (error, results, fields) {
if (error) res.json(error);
else res.json(results);
}
);
});
Do I possibly need to add an app.post for delete?

a tag is using GET-request and you need DELETE-request. Use button and a handler in which you can use some package like axios or got to make such requests (and other GET, POST, PUT).
<button
class="btn btn-light btn-small"
onclick="onDelete">
<i class="bi bi-trash"></i>
Delete
</button>
<script>
import axios from 'axios';
export default {
methods: {
async onDelete() {
if(!confirm('Are you sure you want to delete this entry?') {
return
}
await axios.delete(`/delete/${this.id}`);
},
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
};
</script>

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.

angular-datatables: How to retrieve selected row data for Editing/Delete

I have a edit button and delete button in every rows in the table. I want to find out which row data I have selected when I clicked on to the edit/delete button so that I could do the editing/delete and then update it into my database.
Could anyone guide me out on this?
app.js
app.controller('trackingController', function(....) {
var scope = $scope;
scope.dtInstance = {};
scope.persons = {};
// create a message to display in our view
scope.message = 'Welcome to Tracking Page';
console.log("Tracking");
scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
$resource('data.json').query().$promise.then(function(persons) {
scope.persons = persons;
});
scope.deleteRow = function() {
console.log("deleteRow");
scope.log = 'You are trying to deleteRow the row: ';
}
scope.editRow = function() {
console.log("edit");
scope.log = 'You are trying to edit the row: ';
}
});
index.html
<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="editRow();"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteRow();"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>

In case you need to know which person is being clicked
app.controller('trackingController', function(....) {
var scope = $scope;
scope.dtInstance = {};
scope.persons = {};
// create a message to display in our view
scope.message = 'Welcome to Tracking Page';
console.log("Tracking");
scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
$resource('data.json').query().$promise.then(function(persons) {
scope.persons = persons;
});
scope.deleteRow = function(person) {
console.log(person);
scope.log = 'You are trying to deleteRow the row: ';
}
scope.editRow = function(person) {
console.log(person);
scope.log = 'You are trying to edit the row: ';
}
});
<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="editRow(person);"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteRow(person);"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>

How to use pagination on table using angular-ui

Here is my code. I tried it but it displays all the records and the pagination doesn't seem to work.
<div id="lead-casts" class="row" ng-show="showAllCast" width="auto" ng-init="getAllCast()">
<div class="col-sm-12">
<h1 align="center">All Cast</h1>
<table class="table table-striped">
<th align="center"><h4>NAME</h4></th>
<th align="center"><h4>ROLE</h4></th>
<tbody>
<tr ng-repeat="cast in allCast">
<td>{{ cast.name }}</td>
<td>{{ cast.role }}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" items-per-page="20" ng-model="currentPage"></pagination>
<button class="btn btn-danger pull-left" ng-click="showCast()">Back</button>
<button class="btn btn-info pull-right" ng-click="showCast()">Next</button>
</div>
I also tried on using limitTo filter on the ng-repeat but it only limits the display by 20 items.
<tr ng-repeat="cast in allCast | limitTo: 20">
How can I bind the records or ng-repeat to the pagination?

use startFrom and limitTo
here is the
jsfiddle demohttp://jsfiddle.net/2ZzZB/56/