I'm looking to display a list of 37 items across four separate pages within a table. Can anyone suggest a way to split these items and showcase them in four different pages using either javascript or vue.js?
I'm looking to display a list of 37 items across four separate pages within a table. Can anyone suggest a way to split these items and showcase them in four different pages using either javascript or vue.js?
If you're looking to customize your implementation, one approach is to filter your list of items and divide them into subarrays based on the desired number of items per page. Below is a sample code snippet illustrating how this can be achieved.
Sample component setup:
data() {
return {
currentPage: 1,
itemsPerPage: 3,
items: [{id: 1, title: 'test1'},{id: 2, title: 'test2'},{id: 3, title: 'test3'},{id: 4, title: 'test4'},{id: 5, title: 'test5'},{id: 6, title: 'test6'},{id: 7, title: 'test7'},{id: 8, title: 'test8'}]
}
},
computed: {
paginatedItems() {
let page = 1;
return [].concat.apply(
[],
this.items.map( (item, index) =>
index % this.itemsPerPage ?
[] :
{ page: page++, items: this.items.slice(index, index + this.itemsPerPage)}
)
);
},
currentPageItems() {
let currentPageItems = this.paginatedItems.find(pages => pages.page == this.currentPage);
return currentPageItems ? currentPageItems.items : [];
}
},
methods {
changePage(pageNumber) {
if(pageNumber !== this.currentPage)
this.currentPage = pageNumber;
}
}
Template example:
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr v-for="item in currentPageItems" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
</tr>
</tbody>
</table>
<div>
<span>Page:</span>
<button v-for="i in paginatedItems.length" class="btn btn-secondary mr-1" :class="{'btn-success' : currentPage === i }" @click="changePage(i)">
{{i}}
</button>
</div>
When I execute the following: var test = { 'test': 5 }; Object.freeze(test); // Throws an error test.test = 3; An error is thrown (as expected), but when I try this instead var nestedTest = [ {'test': 5}, {'test&ap ...
Understanding the basics of Bootstrap and how to assign sizes to columns is one thing, but I seem to be stuck on a simple use case. Here is the scenario: I have two components for a Todo list application: Component 'New Todo' (Form Input field ...
I am currently working on enhancing the navigation experience of an existing vueJS application that utilizes Vue Router. When working with React, I typically structure breadcrumbs in the following manner: <Breadcrumbs> <Route path="/users&q ...
I am facing a specific scenario with my directive where the refresh scope needs to be either an object or a function. How can I properly assign this to my directive? 1. Initial scenario <!--HTML--> <directive refresh="vm.refresh"> </dir ...
I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...
Is there a way to download assets (mp3/jpeg) in an Asynchronous manner? I have over 200 files in each case and the process is taking too long. Are there any techniques to speed up the download process on both iOS and Android? ...
Receiving an object from the client side in this format: var condition={"bedrooms":"1,2,3,4","Inhibition":"1,6","possession":"3","id":"8",toilets:"1,2",...,} The object must have the same keys and only be a single object, but its length can vary (1/2 ...
Consider the following HTML code snippet: <div class="comment"> <span class="test">some content here</span> <p>Lorem ipsum</p> </div> <div class="comment"> <p>Lorem ipsum</p> </div> The ob ...
Currently, I am immersed in a project that involves using a webservice (specifically, VB.Net and Javascript). While debugging the code, I encountered an issue with the XmlHttpRequest.status returning as 202. Upon comparison with my previous webservice proj ...
I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...
Despite trying various methods such as the HTML5 download tag, JavaScript, JQuery, and other techniques, I have not been able to successfully download a file to the Album. While photos can be saved by long clicking and selecting "Save Image", videos do n ...
I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...
Looking to implement a service that functions similarly to this example. Here is the code I have so far: app.service('Poller', function ($q, $http, $timeout) { var notification = {}; notification.poll = function (callback, error) { return $ ...
I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...
In my situation, I am facing a unique challenge compared to other queries. I have a div element with the following code <div id="ondiv"><?php ?></div> Within this PHP section are details of people who are currently online. Ideally, when ...
Hey there, I'm currently working on a project using the Material Table and I'm looking to adjust the font size of the options in the Material UI Autocomplete. Any tips would be greatly appreciated! Thanks https://i.sstatic.net/ZM17w.png import R ...
While experimenting with Angular routing, I decided to utilize an in-memory database to retrieve information about the heroes. The original StackBlitz project can be found here. If you go to the heroes tab, select a hero, and modify their name, you' ...
While configuring mochaOpts in Protractor, one of the parameters we define is 'slow'. I'm unsure of the purpose of this parameter. I attempted adjusting its value but did not observe any impact on the test execution time. mochaOpts: { re ...
I seem to be facing a challenge with passing the 'item' to my search function in my Ionic 3 app. Although I was able to successfully connect to a json data file and print objects to the console, I am encountering an error message on the page that ...
I am having trouble when attempting to map a JSON response from a MySQL query as I am receiving no response: data: NULL This is the code in question: const audience = rows.map((row) => { db.query(CountAudiences, [row.campaign], function(err, count ...