How can we easily move, or duplicate, the pagination to above the table?
The Visual composer plugin is also enabled. It would be ideal to just be able to put add a short code or css there, rather than change the php files.
Client requested this feature to make search result navigation more user friendly. It confirms filter/search results are working as desired (narrowing or widening results), and also clarifies the number of pages of filter/search results, and the need to scroll.
This is a very large datatable with a lot of text, so the rows sometimes are not all visible at once, on the screen. This is especially true for mobile devices.
Thanks for your fast reply! Unfortunately, your php code fix broke the table width in both Chrome and Safari. I put it at the end of the functions.php code exactly as written. I've attached "before & after" screen shots.
Perhaps my table is more fragile than usual. There are MANY columns, so I had to use the following custom CSS (provided by Miljko about 2 months ago)...
#table_1 { width: 3500px! important; }
... this custom css code allows for both a table width limit & horizontal scroll.
[] Now that you know this, can suggest a different fix? I actually wanted ALL the info under the datatable, to be placed immediately above the table (but below the search box.) IE: scroll bar, page result count, pagination (image attached).
This would be a big help, because my client has SO many columns, and users have complained they didnt know they could scroll horizontally.
Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.
I appreciate your reaching out to help. I have to ask my client if it's ok to let you have admin access. It would be ok if this was still on my own testing server, but it's live on my client's.
it doesn't seem like there's plugins or errors in code on that page, that would interfere with anything. I eliminated some curly quotation marks my client pasted into the code, but it didn't help.
This time your suggestion (to change class.wpdatatable.php) improved things, without breaking anything in either Chrome or Safari! IE, this fix for the responsive scrollable 100% width table doesn't break the responsiveness of the page header element, etc. In fact, my client will be glad that the pagination is both under and above the table.
However, how can we do the following to finish improving navigation/ layout?
[] (previous request) add another scrollbar to the top of the table [] keep the "Show [ 10 ] entries" and the pagination line, immediately above the table, but [] move the "search" box above those? Ideally directly above the optional table column filters line (eye icon, print, excel, etc) [] make the active page number in the pagination bold. It's hard to tell which page is active.
I've attached a screenshot of this area above the data table.
Bogdan - I gave Miljko Admin access to fix something else. So that you aren't working at cross purposes, I'm going to let him resolve that mystery first, before giving anyone else at wpDataTables access.
I altered the code that Milos gave you and now you can see that all of your request are done. You can find the code in wpDataTables Settings page Custom JS and CSS tab Custom wpDataTables CSS field. Hope this helps.
Your fixes work on both Chrome v54.0 & Safari v9.1.3, on Mac OS X, without breaking anything! Thank you!
2 things...
1. Would you kindly coordinate with Miljko regarding this missing fix?...
"[] (previous request) add another scrollbar to the top of the table"
This means 2 scrollbars total (top + bottom of datatable).
I'm glad you are communicating with Miljko. It's possible that he will fix this, if he updates his earlier solution (only top scrollbar), from another thread that I thought was dead. I just fixed the bootstrap.css code blocking his earlier solution. He didn't know my client wanted both top and bottom scrollbars. Sorry for the overlap!
2. Did you only use CSS via wpDataTables settings, to fix this? Or did you also change code directly on any pages, such as the following ?
1. About 2 scrollbars, there is no easy solution for that. Second scrollbar would require additional Javascript coding and this kind of work is beyond scope of included support. It requires further code customization which we can offer you as paid service. If you are interested in that option please let me know so we can estimate a price and time for the job.
2. Beside I added code in CustomCSS field I also added code in class.wpdatatable.ph Just in case I suggest you to keep the backup of that file,
Thank you for this sophisticated plugin!
How can we easily move, or duplicate, the pagination to above the table?
The Visual composer plugin is also enabled. It would be ideal to just be able to put add a short code or css there, rather than change the php files.
Client requested this feature to make search result navigation more user friendly. It confirms filter/search results are working as desired (narrowing or widening results), and also clarifies the number of pages of filter/search results, and the need to scroll.
This is a very large datatable with a lot of text, so the rows sometimes are not all visible at once, on the screen. This is especially true for mobile devices.
The live webpage... http://teachglobalimpact.org/main/all-classroom-resources/database
Thanks for your time!
Hi Terry,
Thank you for your purchase
It cannot be done with CSS. You have to add this little function in functions.php file of your theme:
function twoPaginations ($object, $table_id) { $object->dataTableParams->sDom = 'BT<"clear">lp<"clear">ftip'; return $object; } add_filter('wpdatatables_filter_table_description', 'twoPaginations', 10, 2);Hi Milo,
Thanks for your fast reply! Unfortunately, your php code fix broke the table width in both Chrome and Safari. I put it at the end of the functions.php code exactly as written. I've attached "before & after" screen shots.
Perhaps my table is more fragile than usual. There are MANY columns, so I had to use the following custom CSS (provided by Miljko about 2 months ago)...
#table_1 { width: 3500px! important; }
... this custom css code allows for both a table width limit & horizontal scroll.
[] Now that you know this, can suggest a different fix? I actually wanted ALL the info under the datatable, to be placed immediately above the table (but below the search box.) IE: scroll bar, page result count, pagination (image attached).
This would be a big help, because my client has SO many columns, and users have complained they didnt know they could scroll horizontally.
Hi TERRY,
Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.
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
Thanks Bogdan,
I appreciate your reaching out to help. I have to ask my client if it's ok to let you have admin access. It would be ok if this was still on my own testing server, but it's live on my client's.
Here's the page... without Milo's functions.php fix: http://teachglobalimpact.org/main/all-classroom-resources/database/
it doesn't seem like there's plugins or errors in code on that page, that would interfere with anything. I eliminated some curly quotation marks my client pasted into the code, but it didn't help.
Hi Terry,
If you are using scrollable tables you can add pagination above table directly in code.
In file ../wp-content/plugins/wpdatatables/source/class.wpdatatable.php
Search for:
if($this->isScrollable()){ $obj->dataTableParams->sDom = 'BT<"clear">lf<"wdtscroll"t>ip'; }and replace it with:
if($this->isScrollable()){ $obj->dataTableParams->sDom = 'BT<"clear">lp<"clear">f<"wdtscroll"t>ip'; }Hi Milo,
This time your suggestion (to change class.wpdatatable.php) improved things, without breaking anything in either Chrome or Safari! IE, this fix for the responsive scrollable 100% width table doesn't break the responsiveness of the page header element, etc. In fact, my client will be glad that the pagination is both under and above the table.
However, how can we do the following to finish improving navigation/ layout?
[] (previous request) add another scrollbar to the top of the table
[] keep the "Show [ 10 ] entries" and the pagination line, immediately above the table, but
[] move the "search" box above those? Ideally directly above the optional table column filters line (eye icon, print, excel, etc)
[] make the active page number in the pagination bold. It's hard to tell which page is active.
I've attached a screenshot of this area above the data table.
Bogdan - I gave Miljko Admin access to fix something else. So that you aren't working at cross purposes, I'm going to let him resolve that mystery first, before giving anyone else at wpDataTables access.
thank you!
Terry
Hi TERRY,
I altered the code that Milos gave you and now you can see that all of your request are done.
You can find the code in wpDataTables Settings page Custom JS and CSS tab Custom wpDataTables CSS field.
Hope this helps.
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,
Fantastic! We are almost there!
Your fixes work on both Chrome v54.0 & Safari v9.1.3, on Mac OS X, without breaking anything! Thank you!
2 things...
1. Would you kindly coordinate with Miljko regarding this missing fix?...
"[] (previous request) add another scrollbar to the top of the table"
This means 2 scrollbars total (top + bottom of datatable).
I'm glad you are communicating with Miljko. It's possible that he will fix this, if he updates his earlier solution (only top scrollbar), from another thread that I thought was dead. I just fixed the bootstrap.css code blocking his earlier solution. He didn't know my client wanted both top and bottom scrollbars. Sorry for the overlap!
2. Did you only use CSS via wpDataTables settings, to fix this? Or did you also change code directly on any pages, such as the following ?
functions.php
class.wpdatatable.ph
I appreciate your time!
VERY appreciatively,
Terry
Hi TERRY,
1. About 2 scrollbars, there is no easy solution for that. Second scrollbar would require additional Javascript coding and this kind of work is beyond scope of included support. It requires further code customization which we can offer you as paid service. If you are interested in that option please let me know so we can estimate a price and time for the job.
2. Beside I added code in CustomCSS field I also added code in class.wpdatatable.ph
Just in case I suggest you to keep the backup of that file,
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
Thanks Bogdan, I'll pass that information on to my client. I appreciate your generous help so far!
Please tell me what change you made to the file class.wpdatatable.php on my client's server.
Appreciatively,
Terry