Is it possible to display the paginate buttons at the top of the table as well as at the bottom? I have a table with an image column, and when you choose another page, the table updates, but stays at the bottom of the table. You have to scroll up to see the data and then scroll down again to change page. Having it in both locations would make it more user-friendly.
Also, is there a way to scroll the page to the top of the table whenever a user changes the page?
I also tried your code sample included, but that wasn't working either. The console log never shows anything when you click on a paginate_button, which means the event isn't firing...
Is it possible to display the paginate buttons at the top of the table as well as at the bottom? I have a table with an image column, and when you choose another page, the table updates, but stays at the bottom of the table. You have to scroll up to see the data and then scroll down again to change page. Having it in both locations would make it more user-friendly.
Also, is there a way to scroll the page to the top of the table whenever a user changes the page?
Hi onaforeignshore,
Thank you for your purchase.
In file wp-content/plugins/wpdatatables/source/class.wpdatatable.php around line 2671 you will see this code
$obj->dataTableParams->sDom = "BT<'clear'>{$showRowsPerPage}{$globalSearch}{$scrollable}{$infoBlock}p";You will notice the letter "p" which stands for pagination. Feel free to position it wherever you want for example
$obj->dataTableParams->sDom = "BT<'clear'>{$showRowsPerPage}p{$globalSearch}{$scrollable}{$infoBlock}";to position it between show rows per page and global search. Maybe you will need to apply some CSS after this.
About scrolling:
You can take a look at this simple example where after you click on pagination button it will scroll to the top of the page.
jQuery('.paginate_button').on('click', function(){window.scrollTo(0,0);
})
Scrolling to the table can be done also but it can require some code customization. You must find the datatable position so it can be scrolled to it.
Hope this can help.
Best regards.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Bogdan ,
I managed to get the pagination part done, but the jQuery isn't working. My code is:
jQuery('.paginate_button').on('click', function(){ console.log('.paginate_button'); jQuery('html,body').stop().animate({ scrollTop: jQuery('.wpDataTablesWrapper').offset().top }, 600); console.log('animate'); });I also tried your code sample included, but that wasn't working either. The console log never shows anything when you click on a paginate_button, which means the event isn't firing...
Regards,
Chris
I found a working solution:
jQuery('body').on('click', 'a.paginate_button', function(e) { jQuery('html,body').stop().animate({ scrollTop: jQuery('.wpDataTables').offset().top - 20 }, 600); });You have to 'listen' to clicks on the 'body' element and then filter for '.paginate_button'.