Can we add next button which can change pagination of list

App Development
1

Hi
I need to add separate button next in page to see next item of list . We got option from pagination next icon but I need to use separate action button or html button which can take to next items in list .

I have tested with following idea but not working.

image
image1675×831 175 KB

Here When I click next , it should take me to next pagination items.

I tried with JavaScript once I click button i was trying to force click the pagination next icon but it is not working .

2

@Chem…any thoughts?

3

You can use the following JavaScript code to accomplish this.

HTML Source Code
<button id="nextBtn" class="btn btn-primary">Next...</button>

JavaScript

var htmlComponentId = 'component_4';

TB.render(htmlComponentId, function(data){
    data.ele.find('#nextBtn').click(function(){
        $($('.pagination-next a')[0]).click();
    });
});

Please remember to change ‘component_4’ to your HTML Component’s ID

image
image1272×532 26.6 KB

4

HI Chem
I tried above solutions but it is not working .

My java script is
image

And Page Builder is as follows:

image
image1606×738 36 KB

And my front end is as follows:

image
image1621×893 190 KB

Html button is as follows:
image

5

Hmm. I’ll need to take a closer look… When you have a moment, please open a ticket or email support@tadabase.io

6

@Chem did you find a solution for this one? I copied the JS, but nothing happens in my frontend app.

7

@bas123 -

I may be incorrect but your button ID doesn’t include the “#” symbol in the HTML code and does in the JS code.

Adam