search

alfajango / jquery-dynatable

A more-fun, semantic, alternative to datatables
http://www.dynatable.com
Other
2.77k stars 361 forks source link

Dealing with page parameter correctly with multiple dynatables on page #260

Closed hammerva closed 7 years ago

hammerva commented 8 years ago

Hello. I have a page that contains 2 dynatables. One that pop ups after the user enters data in an input field. The other that pops up in side panel after the user clicks on a field inside the original dynatable. I can get the processing to work except for one issue. if I am on page 3 of the first dynatable and click on the field, the second dynatable starts at page 3 instead of page 1. I keep trying to figure out how to fix it but have no idea. I would think that I need to update either the 'page' parameter or the 'offset' parameter or both. but I can't figure out the default value that puts it to page 1. I have tried 'page=1,offset=0' no luck. I have tried 'page=null' with no luck.

What would be the proper to update the page and/or offset parameters in the dynatable call in order to always get it on the first page.

Thanks

JangoSteve commented 8 years ago

I think this is an issue with the pushState feature of one table conflicting with the other. The problem is that dynatable uses pushState so that you can click the forward and back buttons in the browser to navigate between different states of dynatable. The problem is, you only have one URL per page, so if one instance updates the URL, the other dynatable instance assumes the URL is changing because you're clicking the forward or back button or something, reads the page parameter in the URL, and acts accordingly, trying to go to the page the URL specifies.

The easy fix is to turn off pushState for at least one of the instances, so it isn't constantly trying to read state from the URL (or pushing state to the URL):

$('#my-table-1').dynatable({
  features: {
    pushState: false
  }
);

The other option is to change the parameter names one of your instances uses for queries, pagination, etc.:

$('#my-table-1').dynatable({ params: { dynatable: 'dynatable2', queries: 'queries2', sorts: 'sorts2', page: 'page2', perPage: 'perPage2', offset: 'offset2', records: 'records2', record: null, queryRecordCount: 'queryRecordCount2', totalRecordCount: 'totalRecordCount2' } );


I think the above should work, but not 100% positive, as I usually just turn pushState off when I have more than one dynatable instances on the page (like in the case of the documentation page that has a bunch: https://www.dynatable.com/).
hammerva commented 7 years ago

Thanks for the response. I changed the pushState to false and that seemed to solve the problem although it created another problem where the page and offset variables on the URL disappear which is a major headache on a few of my screen processes. so I guess I will pass on changing that