{"id":23649,"date":"2021-09-16T09:39:37","date_gmt":"2021-09-16T09:39:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=23649"},"modified":"2023-07-28T09:59:54","modified_gmt":"2023-07-28T09:59:54","slug":"jetengine-adding-pagination-to-table-in-gutenberg","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/","title":{"rendered":"How to Add Pagination to the Table in Gutenberg"},"content":{"rendered":"\n

Pagination<\/strong><\/a> will be a good accent to the table\u2019s customization. If you want to systemize all the needed information, it will sufficiently improve table maintenance. <\/p>\n\n\n\n

Create Table<\/strong><\/h2>\n\n\n\n
\n

Firstly, make sure that you have created a table using JetEngine Tables Builder<\/a><\/strong>. But if you have not done it yet, we have a table-building guide<\/a> for you. <\/p>\n\n\n\n

If this step is already taken, do not hesitate to apply some adjustments. One of these is Query Pagination Limit<\/strong>. <\/p>\n\n\n\n

Additional query customizations<\/strong><\/h3>\n\n\n\n

To make some changes to the number of the items that will be shown in your table, <\/strong>proceed to JetEngine > Query Builder<\/em><\/strong>. <\/p>\n\n\n\n\"jetengine\n\n\n\n

There you can create a new Query <\/strong>or modify an existing one. <\/p>\n\n\n\n

For instance, we have selected WC Product Query<\/strong>. It will represent all the data about our Products<\/strong>. <\/p>\n\n\n\n

There are some additional settings that you can adapt to your desires. However, we are now fully interested in Pagination Settings<\/strong>.<\/p>\n\n\n\n

First things first, make sure that you have toggled Enable Pagination<\/strong> on. That way, Table Query <\/strong>and Pagination <\/strong>will work more efficiently. <\/p>\n\n\n\n

Changing the pagination limit<\/strong><\/h3>\n\n\n\n

To work with this option, proceed to the Limit <\/strong>field. Let us start with \u201c4\u201d items. <\/p>\n\n\n\n\"pagination\n\n\n\n

Do not forget to save changes by clicking on the \u201cUpdate Query\u201d<\/strong> button. To check the results, open a page where your table is displayed. <\/p>\n\n\n\n\"4\n\n\n\n

Suppose we want to show fewer products in our table, for example, only 2 of them. In that case, we have to get back to JetEngine > Query Builder, choose the already created query limited to four products, and change the Limit <\/strong>to \u201c2\u201d in the Pagination Settings<\/strong>.  <\/p>\n\n\n\n\"pagination\n\n\n\n

Now we need to save our query again.<\/p>\n\n\n\n

One more time, we will look if our adjustments are applied on the front end. To do so, proceed to the page where the table is presented.<\/p>\n\n\n\n\"elementor\n\n\n\n

In this way, you already know how to change the number of the Products <\/strong>displayed in the table. <\/p>\n\n\n\n

But if you want to display more Products <\/strong>by using the Pagination <\/strong>block, there is a solution. Let\u2019s find out how to implement it with the help of Gutenberg.<\/p>\n<\/div><\/div>\n\n\n\n

Pagination Block in Gutenberg<\/strong><\/h2>\n\n\n\n
\n

To add Pagination <\/strong>to the table, open the Gutenberg Editor<\/strong> and proceed to the Add New Section<\/strong> by clicking on the Plus <\/strong>icon. Type in Pagination<\/strong>, and drag and drop the block to the area below the table.<\/p>\n\n\n\n

Choose the correct provider for the Dynamic Table<\/strong> block \u2013 \u201cJetEngine Dynamic Table\u201d \u2013 to assign this pagination to the table and pick either \u201cAJAX\u201d or \u201cPage Reload\u201d in the Apply type <\/strong>drop-down on the General <\/strong>tab.<\/p>\n\n\n\n\"general\n\n\n\n

On the Controls <\/strong>tab, <\/strong>you can enable Prev\/Next buttons<\/strong>, change the displayed text, and set Offset <\/strong>values. <\/p>\n\n\n\n\"controls\n\n\n\n

Once you are done with all the General <\/strong>settings,<\/strong> you can style the Pagination <\/strong>block with the JetStyleManager<\/a> plugin. Once you install this plugin, the Brush icon appears in the top right corner of the screen. <\/p>\n\n\n\n\"style\n\n\n\n

All the work is done. You can check the final result on the front end. <\/p>\n\n\n\n\"pagination\n\n\n\n

You now know how to add a Pagination block from the JetSmartFilters plugin to the JetEngine table using Gutenberg. <\/p>\n\n\n\n

In addition, you can check how Pagination works for the Dynamic Product Table<\/strong> on its live demo<\/a> page.<\/p>\n<\/div><\/div>\n\n\n\n

We hope this tutorial will make it easier for you to work with our plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pagination will be a good accent to the table\u2019s customization. If you want to systemize all the needed information, it will sufficiently improve table maintenance. Create Table Firstly, make sure that you have created a table using JetEngine Tables Builder. But if you have not done it yet, we have a table-building guide for you.  […]<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[422,408],"yoast_head":"\nHow to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T09:59:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/jetengine-query-builder.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/\",\"name\":\"How to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-09-16T09:39:37+00:00\",\"dateModified\":\"2023-07-28T09:59:54+00:00\",\"description\":\"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Pagination to the Table in Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock","description":"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.","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:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock","og_description":"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T09:59:54+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/jetengine-query-builder.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/","name":"How to Add Pagination to the Table in Gutenberg \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-09-16T09:39:37+00:00","dateModified":"2023-07-28T09:59:54+00:00","description":"In this overview, you will learn how to add Pagination to the Gutenberg table with the help of the JetEngine plugin. Pagination will be a good accent to the WordPress table\u2019s customization.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table-in-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Pagination to the Table in Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/23649"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=23649"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=23649"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=23649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}