Resetting the offset for new query results

[TomD]

I have a page using a paged query and the pagination generator. I’ve also included an input field to search the database. It all works well, except for one problem.

Suppose a set of search results are displayed and I click on the link to display page 5. This works as expected and the parameter ‘?offset=40’ is displayed in the address bar (using Query Manager). However if I then do another search, page 5 is still displayed, whereas I would want page 1 to be displayed. Also, if the new results contain only a few records, the results page will be blank which might be puzzling.

I’ve tried assigning various events to the input field, and using Key Down with ‘query1.remove(‘offset’)’ for example seems to work.

I’m not sure if this topic should go under ‘How to’, ‘How Not to’ or ‘Bugs’. Is there a simpler solution I’ve overlooked- eg a checkbox I’ve missed somewhere? It might be simpler if I ran the query only when a button was clicked.

[t11]

You should use the ‘state manager’ and set the offset to ‘0’ or whatever you like. So on the ‘new search’ result just add an action using the ‘state manager’ that sets the offset to 0

[TomD]

Thanks, but I’m not sure how this is different to what I’m doing. Both options work and in both cases I’m applying the dynamic event to the input field (which is perhaps not what you meant). I don’t remember having to clear the offset like this in the past - which is why I wondered if I’ve missed an option somewhere.

My original solution:

Following your suggestion:

[t11]

try applying the event on server success

[TomD]

I tried that first. It seemed to work, but there was a problem: whenever a pagination link was clicked the offset would be set to zero - so you could never get beyond page 1!

I just wondered if there is a ‘best practice’ solution for this as I imagine it would be a common issue.

[t11]

I have not yet worked with BS4 pagination in Wappler, but from BS3 version in DW, this is the way I am doing what you are trying to achieve. I would suggest to re-apply the offset to 0 on server success and check that no othet events (onclick etc) are triggering the set offset to 0

[TomD]

Every time a navigation link is clicked, a query is sent to the server, so surely ‘server success’ will be returned on every click (if successful), so the offset will be reset each time - so the navigation will never get beyond page 1.

I think there must be something different about our setups, but the main thing is that you’ve confirmed that something has to be done to prevent the initial problem (to reset the offset). I don’t know why I didn’t come across the issue before, but I haven’t used the DMX extensions much, and when I did I probably didn’t use them as intended.

[t11]

please wait, thank you. Have created the same functionality in the past. let me find out where it was. Thank you

[TomD]

Thanks very much - but no hurry. The solution I’m using seems to work alright.

[George]

As Niko indicated - using a State Manager is the way to go. This way you are making your query pagination depends on a variable from the state manager - which can be from a query string but also from a local storage for example.

This creates a data dependency - so when the data changes your query is rerun. The data chanegs usually when clicking on a pagination link, but also on for example your search filter entry. So on that entry you can set and the search filter and also reset the pagination offset with two actions - now that we allow multiple actions you can execute as many as you want on a single event (like change of the input field)

[TomD]

I’m not sure what you mean. I am using State Manager - to create the ‘offset’ variable. This is what I’m resetting to 0 when a new search is made. I realise the page generator can be used with a query string or local storage; in this case I’m using query strings.

Is there some other way I should be using State Manager? As far as I understand, I am doing what you suggest.

[brad]

I think this seems like a good thing to add to the documentation. Seems this is a very common issue. I have been trying to solve this issue even back in the DMXZone extensions for a long time with no success.

[t11]

Below is the code needed to set the offset to 0 when filtering the query using an input value

This is for the
<input type="text" name="prod_filter" id="prod_filter" class="form-control form-sm" placeholder="Product Name" style="width:300px;" dmx-on:input="query1.set('offset',0)">

This is for the severconnect action
<dmx-serverconnect id="serverconnect_paged_produts" url="../dmxConnect/api/back_admin/products/get_all_products_paged.php" dmx-param:prod_filter="prod_filter.value" dmx-param:offset="query.offset"></dmx-serverconnect>

-What it does:
When the input value changes value we set the offset to 0 and then reload the query.
Serverconnect action has no change in it. I mean it is the code created from Wappler when filtering data.

Thank you!

[TomD]

Thanks @t11. Time flies - this was over a year ago! I had forgotten about this issue cropping up.

I’ve been using different solutions, depending on the circumstances, including the solution I suggested initially - clearing the offset on keypress (Enter key). It might be also be necessary on button click, and on links in menus etc., depending on how you’re searching and whether or not there are page refreshes etc… It can require a bit of work to make sure it’s managed correctly and that incorrect offsets are not in place.

On input - as in your example - is of course another option which will be appropriate in some cases (but could be confusing in others).

[scott]

Hey @TomD,

I found myself in this same situation and wondering about a solution.

First the particulars:

Wappler: 3.5.6
Operating System: Mac Big Sur
Server: nodejs
Database: mysql
Target: Docker Local
Pizza: Canadian Bacon and Pineapple

My administrative pages follow the same general concept.

In the query manager, I have offset, limit, sort, and dir set as variables.

I have a search field that filters the database based on search terms.

In the primary query that populates the BS Table, the offset, limit, sort, and dir are filled in from the query manager and the search is populated by the search input.

Like you, if a user hits the next page in the Pagination List following the BS Table, they see the results as expected. However, if they enter a search term on any page but the first one, the results are not shown.

Were you able to solve this @TomD ?

When @George and @t11 say use State Manager, I am not sure if they mean Query Manager or something else. Either way, I am using the Query Manager.

When I try to follow @t11's coding:

@t11

This is for the
<input type="text" name="prod_filter" id="prod_filter" class="form-control form-sm" placeholder="Product Name" style="width:300px;" dmx-on:input="query1.set('offset',0)">

I get lost at the dmx-on:input="query1.set('offset',0)" part.

I go to my search input field and click on Dynamic Attributes > Input and none of the options look appropriate.

I then look at Dynamic Events > Input and again I am not seeing an option that looks like what is typed above.

So naturally, my next step was to type the code in directly.

<input type="text" class="form-control" id="inp_search" name="search"
aria-describedby="inp_offset_help" dmx-on:input="qm.set('offset',0)">

However, this does not solve the issue and when I look at the field after adding the code, I see:

And when I click on the Name, it shows an empty list, but it is a required field.

So, I'm lost...

[sid]

@scott

then look at Dynamic Events > Input and again I am not seeing an option that looks like what is typed above

Try searching for input. It should be in data section.

As for query manager, can you check if the query manager you have on page has this variable even defined? If yes, then this could be a bug.

[TomD]

@scott

However, if they enter a search term on any page but the first one, the results are not shown.

Were you able to solve this @TomD ?

Yes, but my solution is probably not relevant if you're using NodeJS. I often have pages which can have many query parameters sent to them, in different ways (search form with single or multiple fields, or menus with many individual links). With a lot of links, eg within a 'megamenu', this can mean it's necessary to reset or remove hundreds of parameters (including the offset value) - eg with 15 such parameters to clear and a menu with 60 items, that's 900 query manager .set or .removes.

I put all the sets and removes into a PHP variable and attach this to any links etc. where the parameters need to be reset, eg:
dmx-on:click="<?php echo $removeparams ; ?>qm1.set('categories','Architecture')"
.. so I can control all the resets in one place.

There was a feature request for a way to clear URL params, but this was long ago and it's probably forgotten about (or perhaps there isn't a good way to implement it). I don't know if this is at all relevant if you're using NodeJS; perhaps there's a better solution if you are.

[Teodor]

@TomD
Remove All action will be added to this week’s update So you don’t have to deal with custom PHP code for this.
Thanks for reminding us about this feature request - it will be a really useful option.

[TomD]

Thanks @Teodor. This will be really useful. Even with my solution, it’s a nuisance remembering to update the list of parameters to remove when changes are made. I much prefer having a Wappler-only solution anyway.