Pageing Cards not a table

[bargas28411]

I have gotten to this part in adding Appling dynamic paging tutorial and I am lost because I am using cards (finely got that working) is their another tutorial for cards or any help would be great.

We add a dynamic table, displaying our records on the page . Make sure to select the data object, under database query as an expression for it:

[franse]

Hello @bargas28411
The link you posted is about sort/dir, not pagination..

Here's a tutorial, editor has changed but the logic is pretty the same:

Applying Dynamic Paging

You can add paging to your dynamic data, using the paging generator included in Wappler. First, you need to create a server action: [image] And add a name for it. We call it - records_paged: [image] Right click steps: [image] Open Database Actions: [image] Add Database Connection: [image] Select your database connection or create a new one, if you have not defined one yet: [image] Then right click database connection step (1) and open the database actions menu (2): [image] A…

[bargas28411]

Franse. The info I gave was from the same tutorial as you sent. I am trying to attach this to a Bootstrap Card not a Table, that is where I am having my problem.
joe

[Teodor]

The only difference between a "card" and a "table" is simply what element is the repeat region attached to.
The paging has nothing to do with what element are you repeating on the page - a div, a table, an image etc.

Saying "i can't get it to work" is not helpful at all. Provide some examples of what you have on the page that does not work, some code, or screenshots or a link to your page so that we can help.

[franse]

Here's an example:

1. A paged query and you're done on server side:
   

   

2. A query manager, offset item on it:
   

3. On client side, your server connect offset param points to query offset, you can set the limit with a static value, 5 in my case:
   

   

4. Create a row with a column inside, and a card..
   Set a repeat children, and the expression is the data returned from the query:
   

   

5. Create a pagination, it will control the offset, just select the whole query on data source and query offset value:
   

   

And there you go:

<dmx-query-manager id="query1"></dmx-query-manager>
<dmx-serverconnect id="serverconnect1" url="/api/wapplercommunity/pagination-cards" dmx-param:offset="content.query1.data.offset" dmx-param:limit="5"></dmx-serverconnect>


<div class="container">
    <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect1.data.query.data">
        <div class="col-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{{id_list100}}</h4>
                    <p class="card-text">{{name_list100}}</p>
                </div>
            </div>
        </div>
    </div>
    <ul class="pagination" dmx-populate="content.serverconnect1.data.query" dmx-state="query1" dmx-offset="offset" dmx-generator="bs5paging">
        <li class="page-item" dmx-class:disabled="content.serverconnect1.data.query.page.current == 1" aria-label="First">
            <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',content.serverconnect1.data.query.page.offset.first)"><span aria-hidden="true">&lsaquo;&lsaquo;</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="content.serverconnect1.data.query.page.current == 1" aria-label="Previous">
            <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',content.serverconnect1.data.query.page.offset.prev)"><span aria-hidden="true">&lsaquo;</span></a>
        </li>
        <li class="page-item" dmx-class:active="title == content.serverconnect1.data.query.page.current" dmx-class:disabled="!active" dmx-repeat="content.serverconnect1.data.query.getServerConnectPagination(2,1,'...')">
            <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',(page-1)*content.serverconnect1.data.query.limit)">{{title}}</a>
        </li>
        <li class="page-item" dmx-class:disabled="content.serverconnect1.data.query.page.current ==  content.serverconnect1.data.query.page.total" aria-label="Next">
            <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',content.serverconnect1.data.query.page.offset.next)"><span aria-hidden="true">&rsaquo;</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="content.serverconnect1.data.query.page.current ==  content.serverconnect1.data.query.page.total" aria-label="Last">
            <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',content.serverconnect1.data.query.page.offset.last)"><span aria-hidden="true">&rsaquo;&rsaquo;</span></a>
        </li>
    </ul>
</div>

[bargas28411]

Thanks for the help but for some reason I am stumped. I have gone over the 2018 tutorial and it does not track with the new version of Wappler. Can anyone point me to a newer tutorial for pageing? 6.8.0 or better would be great.
Thanks in advance
Joe

[brad]

I am having a hard time figuring out what you are stumped on? I think you may be making this more difficult than it needs to be.

1: Create a 'Paged' Recordset Query
2: Add a repeat to your element you want repeated. In your case, probably a column with your card inside it.
3: Use the Paging generator too create your pagination.

[franse]

@bargas28411

Can anyone point me to a newer tutorial for pageing? 6.8.0 or better would be great

The example I made was using Wappler 7 Beta and cards, exactly what you need, so there's must be something you're missing.

Please share with us all the info you can, including screenshots from your server action steps and the code you have on the client side

[bargas28411]

Franse
Thanks for the help. I started a new project and followed your tutorial and it worked. Now all I have to do is to add all the other code to this project.

[Hyperbytes]

@bargas28411

have gone over the 2018 tutorial and it does not track with the new version of Wappler. Can anyone point me to a newer tutorial for pageing

Are they the old ones i did on WapplerUnwapped?
If so they are very old and well overdue a makeover but the principal remains unchanged