Search Field Location Previous Next Location

Hi,

thanks for your post!

3.) Changing these strings is possible with a small “TablePress Extension”. To change the “Search” label, please install https://github.com/downloads/TobiasBg/TablePress-Extensions/tablepress-change-datatables-strings.zip as a regular WordPress plugin, and activate it. That plugin’s folder also contains a “lang-en_US.js” file. Just make your desired changes in that file.

1) and 2): That should be possible with some CSS code. Please try adding the following code to the “Custom CSS” textarea on the “Plugin Options” screen of your theme:

.dataTables_paginate,
.dataTables_filter {
  float:none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

This will move these controls to the center for all of your tables. If you just want to do this for individual tables, change the first two lines to

#tablepress-123_paginate,
#tablepress-123_filter {

and adjust the ID from 123 to your table’s ID.

If that does not work, please post the link to the page with your table.

Regards,
Tobias

Hi Tobis,

Page with table: https://mangasucks.com/

The navigation links have not centered, they actually move from right alignment to left alignment.

Hi,

ah, sorry about that. I missed some code. Please try again with

.dataTables_paginate,
.dataTables_filter {
  float:none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.dataTables_paginate a {
  float: none;
}

Regards,
Tobias

Tobias,

You are the MAN!

Thank you.

Hi,

no problem, you are very welcome! ??

Best wishes,
Tobias

Tobias.

Thank you for the great plugin. I see that you can customize the appearance using CSS. I am having trouble changing the search box style and wording of the “Search” button. Do I need to install a Tablepress extension or would this be simple css?

Customizations that I want are to:

1. increase size of search box
2. increase font for “Search”
3. change “Search” to “Search XYZ Database”
4. change background of the search bar to help it stand out on page.

Thanks,
Dan

Hi Dan,

thanks for your question.

For 1, 2, and 4, you can use “Custom CSS” like this:

.dataTables_filter,
.dataTables_filter input {
  font-size: 20px;
  background-color: #ff0000;
}

For 3, you can indeed use a TablePress Extension: https://tablepress.org/extensions/change-datatables-strings/

Regards,
Tobias

Hi Tobias,

Thanks for the quick response, that will work for my project.

Thanks again,

Dan

Hi Dan,

very nice! Great to hear that this will help! ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Just gave it a 5 star review. Thanks.

Hi Dan,

thanks, that really nice! I appreciate it!

Best wishes,
Tobias

Can U Tell Where Can I Change The Label From “Search” To “Search Suburbs”
And Thanks For the Awesome Plugin

Hi,

thanks for your question, and sorry for the late answer. As I was on vacation, I didn’t have a chance to reply earlier.

You could try this TablePress Extension to change these strings: https://tablepress.org/extensions/change-datatables-strings/

Regards,
Tobias

This is a great plug-in and makes it easy for the novice to create and manage tables. I see the solution above to changing the text “search” in the lang-en_US.js file to custom text, however, I have more than one table that I use the search on and would like each of the tables to have different text for the search text. Building this capability into the next release would be great! Wondering if I can throw an if/else statement in the .js file using the table id to accomplish this. I’m a newbie at coding, so any suggestions are appreciated. Again, great plug-in–it makes creating tables very efficient.

Hi,

thanks for your post!

Using if-statements directly in those JS files is not possible unfortunately, but there’s another option for you:
It should be possible to set that string differently for different tables with so-called “Custom Commands” for the DataTables JS library:

"oLanguage": { "sSearch": "Filter records:" }

If you put that into the “Custom Commands” field on the “Edit” screen of a table, it should override that string for this particular table.

Another option (with more work though), would be to “invent” new languages/locales (where each one has a different JS file with the changes strings and an “invented” name like lang-en_US_123.js), and then load that different file, by extending a table’s Shortcode to

[table id=123 datatables_locale="en_US_123" /]

Regards,
Tobias