{"id":23458,"date":"2021-09-16T08:49:36","date_gmt":"2021-09-16T08:49:36","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=23458"},"modified":"2026-01-15T08:48:34","modified_gmt":"2026-01-15T08:48:34","slug":"jetengine-adding-pagination-to-table","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/","title":{"rendered":"How to Add Pagination to the Table in Elementor"},"content":{"rendered":"\n

Pagination<\/strong><\/a> can be used in table customization. If you systematize all the necessary information, it will significantly improve table maintenance.<\/p>\n\n\n\n

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

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

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

Build a Query<\/h2>\n\n\n\n
\n

To make some changes to the number of items that will be shown in your table, <\/strong>proceed to WordPress Dashboard > JetEngine > Query Builder<\/em><\/strong>. There, you can create a new Query<\/strong><\/a> <\/strong>or modify an existing one. We click \u201cAdd New<\/strong>\u201d to build a new query.<\/p>\n\n\n\n

Complete the query\u2019s Name<\/strong>. In our example, it is set to \u201cProducts Query for Table.\u201d<\/p>\n\n\n\n

Then select the required Query Type<\/strong>. For instance, we have selected \u201cWC Product Query<\/a>\u201d. It will represent all the data about our products.\u00a0\u00a0<\/p>\n\n\n\n

Also, set the unique Custom Query ID<\/strong> to connect the query, filter, and table. It should be identical in all the mentioned elements. We put the \u201ctable-pagination\u201d value.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

You shouldn't use numbers<\/a> for IDs.<\/p><\/div><\/div>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n

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

First, ensure that you have toggled Enable Pagination<\/strong> on. This allows the table Query <\/strong>and Pagination <\/strong>to function as intended.<\/p>\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<\/a><\/div>\n\n\n\n

Do not forget to save changes by clicking on the \u201cAdd<\/strong>\/Update Query\u201d<\/strong> button.<\/p>\n<\/div><\/div>\n\n\n\n

Place a Table on the Page<\/h2>\n\n\n\n
\n

To check the results, open a page where your table is displayed, or build one if you haven\u2019t done it yet in the Elementor editor.<\/p>\n\n\n\n

Add a Dynamic Table <\/strong>widget to the page and select the built table in the Table<\/strong> dropdown field.<\/p>\n\n\n\n

You will see that the number of the displayed items is now the same as the Limit <\/strong>set in the Query<\/strong>. In our case, four products are displayed.<\/p>\n\n\n\n

You can also apply the style settings to the table if desired. We have adjusted the style settings in the Style <\/strong>tab.<\/p>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n

Suppose we want to show fewer products in our table, for example, only two. In that case, we have to return to WordPress Dashboard > JetEngine > Query Builder<\/em><\/strong>, select the already created query limited to four products, and change the Limit <\/strong>to \u201c2\u201d in the Pagination <\/strong>settings.<\/p>\n\n\n\n

\"pagination<\/a><\/div>\n\n\n\n

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

One more time, check whether the adjustments are applied in the Elementor editor or on the front end. To do so, proceed to the page where the table is presented.<\/p>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n

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

If you want to display more products by using the Pagination <\/strong>widget, there is a solution. Let\u2019s find out how to implement it with the help of Elementor.<\/p>\n\n\n\n

Also, check our guide on How to Add Pagination to the Table in Gutenberg<\/strong><\/a>.<\/p>\n<\/div><\/div>\n\n\n\n

Add a Pagination Widget in Elementor<\/h2>\n\n\n\n
\n

To add Pagination <\/strong>to the already existing table, begin by checking the page editor.<\/p>\n\n\n\n

If you have already added a table in Elementor, just type in \u201cPagination\u201d <\/strong>in the Search Box,<\/strong> and you will spot the Pagination <\/strong>widget from the JetSmartFilters <\/em>plugin. <\/p>\n\n\n\n

Drag and drop it below the Dynamic <\/strong>Table<\/strong>.<\/p>\n\n\n\n

The first step to displaying our pagination correctly is to choose the source from which the data will be pulled. In our case, we will select the appropriate provider, \u201cJetEngine Dynamic Table\u201d in the Pagination <\/strong>drop-down in our Content <\/strong>tab. <\/p>\n\n\n\n

There is also an opportunity to change the Apply Type <\/strong>from \u201cAJAX\u201d to \u201cPage Reload\u201d or \u201cMixed\u201d. <\/p>\n\n\n\n

Then\u00a0fill in the\u00a0Query ID<\/strong>\u00a0with the value you set earlier\u00a0<\/span>in the Query Builder<\/strong>. In our case, \u201ctable-pagination\u201d.<\/p>\n\n\n\n

\"pagination<\/a><\/div>\n\n\n\n

The next step is adjusting the Controls <\/strong>settings.<\/p>\n\n\n\n

You can choose to show or hide the \u201cPrev\/Next<\/strong>\u201d <\/strong>buttons. It depends on your personal preferences. Below that toggle, there are Prev Text<\/strong> and Next Text<\/strong> fields that allow you to enter the text shown on the button labels before and after the <\/strong>pagination numbers.<\/p>\n\n\n\n

Moreover, you can work with offset numbers to set different values for display.<\/p>\n\n\n\n

Also, work on the Style <\/strong>tab of the Pagination <\/strong>widget if needed.<\/p>\n\n\n\n

\"controls<\/a><\/div>\n\n\n\n

Then, navigate to the Advanced <\/strong>tab. Here, in the Layout <\/strong>tab, paste the ID that connects the query, the Pagination <\/strong>filter, and this dynamic table. In our case, it\u2019s \u201ctable-pagination\u201d.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

Now, publish\/save the page.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the just-edited page on the front end. Here, now the table is displayed with the pagination below.<\/p>\n\n\n\n

\"first<\/a><\/div>\n\n\n\n

Click one of the pages to see if the pagination works correctly.<\/p>\n\n\n\n

\"fifth<\/a><\/div>\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

That\u2019s it; now you know how to add a Pagination <\/strong>widget from the JetSmartFilters <\/em>plugin to the JetEngine <\/em>table on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this overview, you will learn how to add pagination to the Elementor-built table with the help of the JetEngine plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[418,408],"yoast_head":"\nHow to Add Pagination to Table in Elementor \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.\" \/>\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\/\" \/>\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 Table in Elementor \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-15T08:48:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/01\/products-query-general-settings-1024x640.webp\" \/>\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=\"6 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\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/\",\"name\":\"How to Add Pagination to Table in Elementor \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-09-16T08:49:36+00:00\",\"dateModified\":\"2026-01-15T08:48:34+00:00\",\"description\":\"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/#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 Elementor\"}]},{\"@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 Table in Elementor \u2014 JetEngine | Crocoblock","description":"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.","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\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Pagination to Table in Elementor \u2014 JetEngine | Crocoblock","og_description":"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/","og_site_name":"Help Center","article_modified_time":"2026-01-15T08:48:34+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/01\/products-query-general-settings-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/","name":"How to Add Pagination to Table in Elementor \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-09-16T08:49:36+00:00","dateModified":"2026-01-15T08:48:34+00:00","description":"Learn how to add pagination to the table with the help of the JetEngine plugin, systemize all the needed information, and sufficiently improve table maintenance on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetengine-adding-pagination-to-table\/#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 Elementor"}]},{"@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\/23458"}],"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=23458"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=23458"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=23458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}