Mobile – Paging Controls

Hi,

thanks for your post, and sorry for the trouble.

Your best chance would be to use the TablePress Extension from https://tablepress.org/extensions/change-datatables-strings/ and changing the corresponding string in the JSON file.

Regards,
Tobias

Tobias

That certainly works for the strings. I used abbreviated labels (e.g. “NXT PRV”) and now everything is on the same line!

As with my other request on the responsive collapse button color:

– is there any CSS that I can apply to change the Previous / Next arrow colors?

– and I suspect I know it’s embedded in the plugin code itself, but is there any way to replace the arrow icons? This isn’t as important as the color of the arrows, but I use different symbols throughout my site.

Thanks!

FEEDBACK

I’ve tried a number of “low code” database vendors that provide embedded js to insert a report into WordPress pages. None of them work particularly well…most of their responsive reports look terrible and are not configurable.

So, Tablepress has a great solution with lots of css options to integrate the look n feel of a table into my site.

What would be awesome (although huge effort) would be adding dynamic queries of a local mySQL db, rather than having static data. I think your work is based on the datatables project – I’m not sure where they stand on this feature, but it would be a home run if this could be done with Tablepress and would open up a much broader market for you…;>)

• This reply was modified 6 years, 11 months ago by IMTanuki.

Hi,

yes, you can also style the colors and arrow icons using CSS code. (The icons are actually a web font.) I recommend to inspect these elements with your browser’s Developer Tools (I recommend those from Chrome). This should give you an idea of how the CSS selectors work. You could also take a look at the TablePress default CSS file to see how it sets these colors and characters.

Regarding the mySQL idea: I don’t have plans to integrate support for that, as TablePress would just not be flexible enough for the wide variety of use cases here. If someone wants to use a mySQL DB table, I recommend to run the query and generate the table HTML code from it with PHP, and then just load the DataTables JS library on top of that with custom code.

Regards,
Tobias

Tobias,

There’s quite a bit of CSS that seems to manage the pagination controls.

ARROWS
– I was able to change the color scheme for the arrows.

PREV / NEXT TEXT FORMATTING
– I was able to remove the underline.
– But for some reason, I can’t change the color.

Am I in the right section…?
.dataTables_paginate a {
color: #777777 !Important; (THIS DOESN’T WORK)
text-decoration: none !important; (THIS WORKS)
}

Tobias,

Different combinations get inconsistent results:

1. COLOR WORKS, BUT NOT ICON
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9; (CHANGES CHEVRON COLOR)
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: “\25B6”; (DOES NOT CHANGE CHEVRON SYMBOL)
text-shadow: 0.1em 0.1em #777777; (CHANGES CHEVRON SHADOW)
}

2. ICON WORKS, BUT NOT COLOR
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9 !Important; (IGNORES THIS SETTING)
font-family: Abel;
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: “\25B6” !Important; (NOW WORKS)
text-shadow: none !Important;
vertical-align: middle !Important;
}

3. LEFT VS RIGHT ICONS FOR PREV AND NEXT
– The original CSS displays a LEFT and RIGHT chevron for PREV and NEXT respectively.
– The CSS above displays ONLY the RIGHT arrow for both PREV and NEXT.

• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.

PROGRESS

Here is the CSS that almost works. Outstanding issues:
– content doesn’t work unless I add !Important.
– color still doesn’t work if I change content with !Important.
– the left arrow (PREV) is too close to the text (PREV) and neither padding-right nor left seem to work (but padding-bottom does!)

CSS
/* TABLEPRESS – COMMON – PAGINATION – CONTROL OVERRIDES – ARROW SYMBOLS*/
/* COMMON TO PREV AND NEXT*/
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9 !Important; (DOESN’T WORK IF CONTENT IS IMPORTANT)
font-family: Abel;
font-weight: normal;
text-shadow: none !Important;
padding-bottom: 15px !Important;
vertical-align: middle !Important;
}

/* SPECIFIC TO PREV */
.paging_simple .paginate_button.previous:before {
content: “\25C0” !Important;
padding-right: 30px !Important; (DOESN’T CHANGE HORIZ POS)
text-align: left;
left: auto;
}

/* SPECIFIC TO NEXT */
.paging_simple .paginate_button.next:after {
content: “\25B6” !Important;
text-align: right;
left: auto;
}

Color settings work on desktop, but not on mobile!

Hi,

yes, you might have to work with !important here, in order to override the CSS specifity. In addition, you might have to use more precise CSS selectors, i.e. add more CSS classes to the CSS.

I don’t see how the settings could work on desktop, but not mobile. This would only be possible if you are using caching on the phone, or if you are loading different CSS.

Regards,
Tobias