Fausto, currently the pagination switches between items pages, it cannot switch between dynamic pages. You can code the pagination to switch between dynamic pages using the API.
Hi Idan
Can you check the pagination, it seems to have bug as it is not connecting on my dataset (not even turning to green) at the moment. It is wonderful by the way but how about the speed of the switch?
Thanks,
DA
Hi DA,
Had same problem. Here are 2 ways I resolved that issue. Maybe one of them will work for you.
OPTION 1
OPTION 2
- Remove/Delete existing Pagination control.
- Re-add a new Pagination control onto the page.
-
Note: you may want to try a different style Pagination control - just to test if the Data button will turn green . Then, if the button turned green, you can change the style of the Pagination.
-
Navigate to: Design → Customize Design button → "< Preset Designs " button
- Connect your dataset to Pagination.
(optional) 4. If still button has not turned green, try OPTION 1 with this new Pagination control.
Hope this is helps,
Nick
#docpadz | #software | #webapps | wix - www.docpadz.com | @docpadz
Hi DA, thanks for paying out attention to this bug. Nick’s option 1 should work for you.
This looks good.
Could it work with the following search code.
import {local} from 'wix-storage';
import wixData from 'wix-data';
$w.onReady(function () {
var sameWord = local.getItem("searchWord");
$w("#searchBar").value = sameWord;
$w("#searchBar").placeholder = sameWord;
$w('#dataset1').onReady(function () {
search();
});
});
export function searchButton_click() {
search();
}
function search() {
wixData.query('Office')
.contains('propertyCity', $w("#searchBar").value)
.find()
.then(res => {
$w('#repeater1').data = res.items;
});
}
$w.onReady(function () {
});
export function sButton9_click() {
let word = $w("#searchBar").value;
local.setItem("searchWord", word);
wixLocation.to(`/officessearch`);
}
Hi Nick & Idan
Thanks a lot for that kind answer.
It did connect but im thinking to make my own pagination as I can’t customize it. I mean, I want to collapse my repeater when either next or previous function is called then once the items are ready I want to expand my repeater. I dont know how to do it onClick or onChange event with pagination input.
Huh, sadly not a coder. lol
DA
DA, you can do it with both functions easily!
Here is a code to collapse the repeater on every page change:
$w(“#myPagination”).onChange((event, $w) => {
$w(‘#repeater1’).collapse();
});
here is a code to expand the repeater when items are ready:
$w(“#repeater1”).onItemReady(($w, itemData, index) => {
$w(‘#repeater1’).expand();
});
-
Place the code I wrote here inside the onReady function
-
Change ‘myPagination’ to your pagination name
-
Change ‘repeater1’ to your repeater name:
Let me know if that works for you.
Thanks for that Idan.
Hi Idan
OMG, perfect!!! Thanks a lot Idan - You are the man…
DA
Hi All,
Posting this as purely information.
I populate my repeaters exclusively through code and not through datasets. So here is the solution for anyone who prefers to do it that way.
let items_per_page = 3;
let total_ pages = Math.ceil(repeaterData.length / X)
$w("#pagination_element").totalPages = total_pages;
$w("#pagination1").onClick( (event, $w) => {
let start_position = (($w("#pagination1").currentPage - 1) * items_per_page);
let end_position = start_position + items_per_page
$w("#repeater2").data = repeaterData.slice(start_position, end_position);
});
Works like a charm.
Thanks
Hello,
I’m trying to set manually the currentPage of the Pagination element.
As the API description says ‘If the pagination bar is connected to a dataset, setting currentPage updates the current page of the dataset and updates any relevant elements connected to that dataset.’
However, for me, it only updates the currentPage value but does not update the elements of my repeater connected to the datasets.
Can be related to the fact that I’m using 2 dataset for my repeater?
$w.onReady(() => {
$w("#propertiesDataset").onReady(() => {
//set currentPage
$w("#pagination1").currentPage = 4; //this doesn't update repeater elements
});
$w("#picturesDataset").onReady(() => {
$w('#propertiesRepeater').forEachItem( ($w, itemData, index) => {
const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
$w('#repeaterPropertyPrice').text = numberWithCommas(parseInt($w('#repeaterPropertyPrice').text));
} );
});
$w("#propertiesRepeater").onItemReady(($w, dataItem, index) => {
let linkToDynamicPage = dataItem["link-Properties-property_id"];
$w('#repeaterPropertyContainer').onClick(() => {
wixLocation.to(linkToDynamicPage.toString());
});
});
});
@Idan cohen,
How do you setup Pagination to connect to JSON and not a dataset. The documentation only mentioned that “You can also use a pagination bar without connecting it to a dataset. When doing so, you have to provide the pagination logic that runs when a user interacts with the pagination bar.”.
I want my repeaters to implement pagination. I know how to use Pagination with Repeaters if the repeater is connected to a Dataset. But in this case, my data is a JSON.
Can you suggest any attributes of Pagination element that I can use to connect to JSON or alike?
thanks.
Hi Idan cohen,
My apologies. Please disregard my queries above. I did not read all of the comments. Guess what! One of the comments is the perfect guide for me. The comment from David Seroy. Thanks David! This is just what I need. I changed a bit of the code to fit my requirements but basically that was it!
Cheers!
Glad you found a solution. If you like, please show-off your work! I will be glad to see what you did with the pagination and JSON.
hi, are you still around ?
I have been losing my mind trying to get my pagination bar to work. My main issue is that when I try to add a specific collection to the dataset {the dataset that I want to link to the pagination bar}, all that comes up is ‘Collections,’ and it doesn’t let me choose a specific collection. I have a collection linked to each page on my site {i.e. women’s have their own page, men’s have their own page etc.}, so I have got to have the option to get specific on each page. I’ve added buttons to my pages and since they have a link button I’ve been able to link directly with my specific collection. Perhaps this is all just over my head? I’m not a coder, which is why I picked Wix to begin with, lol. Am I supposed to be writing my own pagination codes too? I’ve got over 3k items in one of my specific collections…so having pagination is pretty much crucial for customers to get to all of the products really. I’ve spent so much time already that it’s like it’s too late to turn back…but I guess I shouldn’t have assumed that a website builder would have paging options. Thanks for any help you can give.
Hi @earthtomarrs I want to help you, but I’m not sure 'i understand your case. Where and how do you want to present your 3000 items? What do you expect the pagination to do?
Please provide more details, screenshots, and URLs so I can help.
Hello, thanks for replying. So, I’m trying to link a dataset to my pagination bar…but under ‘connect to a collection’ it doesn’t show all of my pages in the drop down bar, just the broad ‘Collections,’ ‘Products,’ and ‘Orders’ shows up when I click the down arrow. I thought maybe it had to do with my pages not being dynamic {I never saw that option when I initially chose to add the collections to my store}, so I went in and tried to see if I could change the pages to dynamic pages, hoping that would then let me add specific collections to the dataset, but the option to change pages to dynamic pages does not pop up for the ones with the shop bag widget next to them {I have taken a snap shot of what I’m talking about and will post those below this message}. I recently added buttons to the top of my pages for like ‘Women’s’ ‘Men’s’ Accessories etc…and it was so easy because it had a link button as well as a dataset option…but that option is not available on my pagination bars it seems.
Thanks for attempting to help me…I’ve spent days trying to figure this out.
