{"id":6138,"date":"2022-09-01T16:21:00","date_gmt":"2022-09-01T10:51:00","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/"},"modified":"2022-09-01T16:21:00","modified_gmt":"2022-09-01T10:51:00","slug":"solved-split-list-item-and-show-in-multiple-pages-inside-table-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/","title":{"rendered":"[Solved] Split list item and show in multiple pages inside table [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

If you want your own implementation you can filter your list of items and split it into subarrays based on how many items you want in one page. Below is an example code on how to achieve that.<\/p>\n

Example component’s contents:<\/p>\n

data() {\n   return {\n      currentPage: 1,\n      itemsPerPage: 3,\n      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'}]\n   }\n},\ncomputed: {\n   paginatedItems() {\n      let page = 1;\n      return [].concat.apply(\n         [], \n         this.items.map( (item, index) => \n            index % this.itemsPerPage ? \n               [] : \n               { page: page++, items: this.items.slice(index, index + this.itemsPerPage)}\n         )\n       );\n   },\n   currentPageItems() {\n      let currentPageItems = this.paginatedItems.find(pages => pages.page == this.currentPage);\n        return currentPageItems ? currentPageItems.items : [];\n   }\n},\nmethods {\n   changePage(pageNumber) {\n      if(pageNumber !== this.currentPage)\n           this.currentPage = pageNumber;\n   }\n}\n<\/code><\/pre>\n
Example template:<\/p>\n
  <table class=\"table\">\n    <thead>\n      <tr>\n        <th>ID<\/th>\n        <th>Title<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n      <tr v-for=\"item in currentPageItems\" :key=\"item.id\">\n        <td>{{item.id}}<\/td>\n        <td>{{item.title}}<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n  <div>\n    <span>Page:<\/span>\n    <button v-for=\"i in paginatedItems.length\" class=\"btn btn-secondary mr-1\" :class=\"{'btn-success' : currentPage === i }\" @click=\"changePage(i)\">\n      {{i}}\n    <\/button>\n  <\/div>\n<\/code><\/pre>\n
http:\/\/jsfiddle.net\/eywraw8t\/334506\/<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Split list item and show in multiple pages inside table [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] If you want your own implementation you can filter your list of items and split it into subarrays based on how many items you want in one page. Below is an example code on how to achieve that. Example component’s contents: data() { return { currentPage: 1, itemsPerPage: 3, items: [{id: 1, title: ‘test1’},{id: … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,808],"class_list":["post-6138","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-vue-js"],"yoast_head":"\n[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] If you want your own implementation you can filter your list of items and split it into subarrays based on how many items you want in one page. Below is an example code on how to achieve that. Example component’s contents: data() { return { currentPage: 1, itemsPerPage: 3, items: [{id: 1, title: 'test1'},{id: ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-01T10:51:00+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Split list item and show in multiple pages inside table [closed]\",\"datePublished\":\"2022-09-01T10:51:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\"},\"wordCount\":75,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"vue.js\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\",\"name\":\"[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-01T10:51:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Split list item and show in multiple pages inside table [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb","og_description":"[ad_1] If you want your own implementation you can filter your list of items and split it into subarrays based on how many items you want in one page. Below is an example code on how to achieve that. Example component’s contents: data() { return { currentPage: 1, itemsPerPage: 3, items: [{id: 1, title: 'test1'},{id: ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-01T10:51:00+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Split list item and show in multiple pages inside table [closed]","datePublished":"2022-09-01T10:51:00+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/"},"wordCount":75,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","vue.js"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/","name":"[Solved] Split list item and show in multiple pages inside table [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-01T10:51:00+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-split-list-item-and-show-in-multiple-pages-inside-table-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Split list item and show in multiple pages inside table [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=6138"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6138\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=6138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=6138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=6138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}