{"id":49282,"date":"2025-08-27T09:58:42","date_gmt":"2025-08-27T09:58:42","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49282"},"modified":"2025-09-08T08:16:36","modified_gmt":"2025-09-08T08:16:36","slug":"how-to-add-pagination-to-listing-via-lovable","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/","title":{"rendered":"How to Add Pagination to the Listing via Lovable"},"content":{"rendered":"\n

Discover how to create a listing with pagination using the Lovable AI website builder. This guide explains how to connect your WordPress data through JetEngine\u2019s <\/em>REST API endpoints, configure pagination parameters, and generate a user-friendly directory website with Lovable.<\/p>\n\n\n\n

From our WordPress and AI Builders Integration using Crocoblock: Bolt and Lovable Cases<\/strong><\/a> article, you can learn about the integration with Crocoblock. In this guide, we focus on setting up the listing with pagination.<\/p>\n\n\n\n

Setting Up a Query Builder Source<\/h2>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Query Builder<\/em><\/strong> and click the \u201cAdd New<\/strong>\u201d button. Type the query Name<\/strong> and select the \u201cCustom Content Type Query<\/a>\u201d option as a Query Type<\/strong>.<\/p>\n\n\n\n

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

REST API Activation<\/h2>\n\n\n\n
\n

In the query you created, enable the Register REST API Endpoint<\/strong> toggle. Then, set up the Endpoint Namespace<\/strong> and Endpoint Path<\/strong>.\u00a0<\/p>\n\n\n\n

You receive the REST API Endpoint URL<\/strong>; keep it, as we will use it in the prompt later.\u00a0<\/p>\n\n\n\n

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

In the Query Arguments,<\/strong> add the parameters that will filter the listing. Refer to our How to Build a Listing with Filters via Lovable<\/a><\/strong> guide to learn more about setting up filters for your listing. <\/p>\n\n\n\n

To add pagination to the listing, let\u2019s have a closer look at its settings. <\/p>\n\n\n\n

If we use a simple CCT <\/strong>endpoint, pagination is quite straightforward. There are built-in \u201c_limit\u201d and \u201d_offset\u201d parameters, and it is enough to mention in the prompt that these should be applied.<\/p>\n\n\n\n

With Query Builder<\/strong>, the setup depends on the type of query you use. For example, in a Posts Query<\/strong><\/a>, you can simply pass the page number, while for a CCT Query<\/strong>, you will need to work with the offset parameter. <\/p>\n\n\n\n

Let\u2019s have a closer look at the pagination setup for the CCT Query<\/strong>. <\/p>\n\n\n\n

First, pagination itself will work by changing the \u201coffset\u201d parameter, so add it to the Query Arguments<\/strong> in the Query Builder<\/strong> settings.<\/p>\n\n\n\n

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

Next, scroll down a bit and set the Content Type,<\/strong> then add a fixed parameter in the Number <\/strong>field \u2013 this defines how many items will be displayed per page.<\/p>\n\n\n\n

Finally, pass this parameter into the Offset <\/strong>setting using a macro. Note that there is no UI control for macros in this case, so you will need to insert the macro manually. So here we inserted the following macro: <\/p>\n\n\n\n

%query_var|offset%<\/code><\/pre>\n\n\n\n
Where the \u201coffset\u201d is equal to the Query Argument<\/strong> we added earlier. <\/p>\n\n\n\n
\"number<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>
Ensure that you retain the REST API Endpoint URL<\/strong>, the list of parameters you added to the Query Arguments<\/strong>, and the Example of the REST API Endpoint URL with Query Arguments<\/strong>, as this information will be used in the prompt.<\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n
Creating a Prompt<\/h2>\n\n\n\n
\n
Now, proceed to the Lovable<\/a> platform and sign in or log in. <\/p>\n\n\n\n
The prompt should include information about the site you need to create, such as its type and purpose, as well as the main functions that are expected to be implemented. You can also share some existing sites as examples and any other context that may be helpful for the builder. <\/p>\n\n\n\n
It should also be noted that the data should be retrieved from the REST API, and the URLs you saved earlier should be shared. It is recommended to describe the specific data that will be obtained from the URLs. <\/p>\n\n\n\n
If you use the CCT <\/strong>as a source, describe what meta fields from the CCT<\/strong>. When you use the query as a source, you can copy an item from the Preview results<\/strong> section for the AI builder. <\/p>\n\n\n\n
\"item<\/a><\/div>\n\n\n\n
If you need a single page to exist on the site, request its creation and share the Endpoint URL<\/strong> from which the single page will be obtained. <\/p>\n\n\n\n
When setting up pagination, the prompt should include the number of items per page. <\/p>\n\n\n\n
Even if you have already defined this manually in the query settings, it is important to mention it in the prompt.<\/p>\n\n\n\n
For the CCT <\/strong>endpoint (direct API request, without Query Builder<\/strong>), you will need to pass the \u201c_limit\u201d parameter that defines the number of items per page.<\/p>\n\n\n\n
The parameter responsible for switching pages depends on the type of query you are working with.<\/p>\n\n\n\n
In our example, we use the offset parameter, so we specify this in the prompt.<\/p>\n\n\n\n
The total number of items is required to calculate the total number of pages.<\/p>\n\n\n\n
You can get it from the API response headers. Most often, it will be the Jet-Query-Total header. Sometimes you can use Jet-Query-Pages instead (for example, in a Posts Query<\/strong> where you pass the page number instead of an offset).<\/p>\n\n\n\n
Here is an example prompt for the Query Builder<\/strong> source:<\/p>\n\n\n\n
Also, let's add pagination. You can get the total results count from the API response header Jet-Query-Total. Also API supports the `offset` parameter to change the page. I've already set up the API on the server side to return 6 items per page.<\/code><\/pre>\n\n\n\n
If you work with the CCT <\/strong>endpoint, you can use the following prompt example: <\/p>\n\n\n\n
Also, let's add pagination. You can get the total results count from the API response header Jet-Query-Total. Also API supports the `_offset` parameter to change the page. Set 6 items per page using `_limit` API parameter.\n<\/code><\/pre>\n\n\n\n
Here is the whole prompt we used in this tutorial to get the listing with the pagination and filters:<\/p>\n\n\n\n
I want to build a website, which is a showcase of other websites built with Crocoblock plugins, like this - https:\/\/crocoblock.com\/websites-made-with-elementor-and-crocoblock\/\n\nYou can grab the data by the API from here - https:\/\/demo.crocoblock.com\/lab\/wp-json\/jet-cct\/websites\n\nI need a listing of the websites with filters by used plugins, website type, and topic, and optionally by author. Also, I need the single page for the website, based on the data from the API. A single website could be retrieved from the API by such a URL - https:\/\/demo.crocoblock.com\/lab\/wp-json\/jet-cct\/websites\/{_ID}, where {_ID} you need to replace with the actual item ID.\n\nAllowed plugins for the filters\n\nJetEngine\nJetSmartFilters\nJetFormBuilder\nJetThemeCore\nJetElements\nJetMenu\nJetTabs\nJetWooBuilder\nJetProductGallery\nJetCompareWishlist\nJetPopup\nJetTricks\nJetReviews\nJetSearch\nJetAppointment\nJetBooking\nJetBlog\n\nAllowed types\n\nE-Commerce\nDirectory\nPersonal Blog\nPortfolio\nCorporate Website\nLanding Page\nNews Portal\nOnline Magazine\nMembership Site\nForum \/ Community\nEducational Website\nNonprofit \/ Charity\nGovernment Website\nWeb App \/ SaaS\nBooking Website\nEvent Website\nResume \/ CV Website\nAffiliate \/ Review Website\nMarketplace\nWiki \/ Knowledge Base\nPodcast Website\nRestaurant \/ Menu Website\n\nAllowed topics\n\nFashion\nTechnology\nLifestyle\nTravel\nFood\nHealth & Fitness\nPersonal Finance\nEducation\nEntertainment\nPhotography\nParenting\nHome & Garden\nDIY & Crafts\nBeauty\nAutomotive\nBusiness\nMarketing\nSports\nNews & Politics\nGaming\nMusic\nArt & Design\nReal Estate\nScience\nSpirituality & Religion\nPets\nEnvironment & Nature\nCareers & Jobs\nRelationships & Dating\nReviews & Product Comparisons\n\nExample of the API URL with filter parameters\n\nhttps://demo.crocoblock.com\/lab\/wp-json\/jet-cct\/websites\/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer\n\nHere is a description of all API response props (which also can be used as request parameters in _filters)\n\n_ID - Item ID;\nwebsite_name - Website Name;\nwebsite_url - Website URL;\npreview_image - Preview Image;\ndeveloper_name - Developer Name;\nplugins_used - Plugins Used;\nwebsite_type - Website Type;\nwebsite_topic - Website Topic;\ndescription - Description;\ncct_author_id - Item Author;\ncct_created - Created Date;\ncct_modified - Modified Date;\ncct_status - Status;\n_cct_search - Search string, type: string;\n_cct_search_by - Comma separated field names list to search only by these fields, type: string;\n_limit - Items limit, type: number;\n_offset - Items offset, type: number;\n_orderby - Order items by field, type: string;\n_order - Order - asc or desc, type: string;\n_ordertype - Order value type - integer, float, timestamp, date, string, type: string;\n_filters - JSON-encoded filters string, type: string;\n\nAlso, let's add pagination. You can get the total results count from the API response header Jet-Query-Total. Also API supports the `offset` parameter to change the page. I've already set up the API on the server side to return 6 items per page.\n<\/code><\/pre>\n\n\n
<\/svg><\/div>
Things to know<\/div>
Please note that the prompt is provided as an example, so feel free to customize it according to your specific needs.<\/p><\/div><\/div>\n\n\n\n
Paste the prompt into the Lovable input and click the arrow-shaped icon or the \u201cEnter<\/strong>\u201d button. <\/p>\n<\/div><\/div>\n\n\n\n
Check the Result<\/h2>\n\n\n\n
\n
Here is the site we got: https:\/\/croc-showcase-hub.lovable.app\/<\/a> <\/p>\n\n\n\n
The list of sites is visible, along with the pagination.<\/p>\n\n\n\n
\"site<\/a><\/div>\n\n\n\n
The pagination works properly \u2013 we can move between the pages.<\/p>\n\n\n\n
\"pagination<\/a><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s it. Now you know how to add pagination to a listing using the JetEngine <\/em>WordPress plugin and Lovable builder.  <\/p>\n","protected":false},"excerpt":{"rendered":"
Discover how to add pagination to listings in Lovable. Utilize JetEngine Rest API endpoints to integrate WordPress data and create a user-friendly directory site.<\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[583],"yoast_head":"\nHow to Add Pagination to the Listing via Lovable \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.\" \/>\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\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/\" \/>\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 Listing via Lovable \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-08T08:16:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/query-created-1-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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/\",\"name\":\"How to Add Pagination to the Listing via Lovable \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-08-27T09:58:42+00:00\",\"dateModified\":\"2025-09-08T08:16:36+00:00\",\"description\":\"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/#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 Listing via Lovable\"}]},{\"@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 Listing via Lovable \u2014 JetEngine | Crocoblock","description":"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.","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\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Pagination to the Listing via Lovable \u2014 JetEngine | Crocoblock","og_description":"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/","og_site_name":"Help Center","article_modified_time":"2025-09-08T08:16:36+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/query-created-1-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/","name":"How to Add Pagination to the Listing via Lovable \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-08-27T09:58:42+00:00","dateModified":"2025-09-08T08:16:36+00:00","description":"Discover how to add pagination to listings in Lovable. Utilize JetEngine REST API endpoints to integrate WordPress data and create a user-friendly directory site.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-pagination-to-listing-via-lovable\/#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 Listing via Lovable"}]},{"@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\/49282"}],"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\/20"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49282"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49282"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}