Installation of ColVis

Hi,

thanks for your post, and sorry for the trouble.

Installing DataTables Extension is not that trivial, unfortunately, as one has to alter the initialization calls that TablePress makes to the JS library. It’s therefore not as easy as pasting that JS code into the “Custom CSS” textarea or just changing the Shortcode.

However, regarding the ColVis add-on, you are lucky: I already created a TablePress Extension from that which will integrate the JS library into TablePress. For details, please see https://tablepress.org/extensions/datatables-colvis/

Regarding the DataTables Sorting Plugins Extension: Please provide more details about what’s not working here. You’ll basically just have to install and activate that like a regular WordPress plugin and then (depending on the data type) add a “Custom Command” as explained on the Extension’s web page.

Regards,
Tobias

Dear Tobias,

Thanks a lot for your answer! I could download and enjoy your Sorting Plugin for my tab. It’s very useful.

My Table is a list of motorcycles in sale. Here is the link:

https://motosport.seo4advisors.com/motos-en-venta/#Lista de motos en venta

I looked up for solutions on the forums and by myself but I remain with two problems:

1) The font of the Table is different from the other pages of the website, as you can see. I made some changes and now the font is different, do you know how I could have the standard font back in my table ?

2) I would like to display a tool above the table that will allow you to select only particular rows. In the tool you will select the type of moto you are interested in, example I select “Enduro” and just the Enduros motos show up.
I tried your Row-selection Plugin, which is very well done but doesn’t display a tool-selector above the table to let the users make their own selection.

Once again, thanks a lot for your time and your answer.

Best,

Hi,

1) This is caused by some extra HTML tags around the Shortcode, namely the Shortcode is wrapped in HTML <pre> tags. To fix this, please go to the “Edit” screen of the page, and switch from the “Visual” to the “Text” editor.
There, remove the <pre class="text"> and </pre> around the Shortcode, so that there’s only the Shortcode on its own line, with an empty line before and after it.
That should restore the fonts.

2) For this, the ColumnFilterWidgets Extension from https://tablepress.org/extensions/datatables-columnfilterwidgets/ could be helpful.

Regards,
Tobias

Tobias you are THE man ! Thank you so much.

I am gonna use this table for now and I will learn javascript language later.

One last thing, what is the best way to change the language of the table in spanish ? Do I have to do it through the HTML or is there any easiest way ?

Best,

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

For changing the table language to Spanish, it should be enough to either set the WP_LANG constant in your wp-config.php to es_ES (which will also turn the rest of the WordPress admin area to Spanish). Or, you could extend the Shortcode with a parameter:

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

Finally, you could also use the TablePress Extension from https://tablepress.org/extensions/change-datatables-strings/ to translate things.

Best wishes,
Tobias

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

Thank you! Muchas gracias!

One more thing, the ColumnFilterWidgets Extension is very useful but is there any way to display the tool differently.

Is it possible to have the list of key words displayed with little boxes to be checked to make the selection ?

Example:

Tipo:
o Enduro
o Velocidad
o Vintage
o Ciudad

And we can check the boxes to make the selection of the rows we want to see.

Best,

Hi,

you are very welcome! Good to hear that this helped!

For that desired change in the ColumnFilterWidgets: Unfortunately, I’m not aware of a solution to that, sorry. The ColumnFilterWidgets add-on for DataTables can only use dropdown lists, as far as I know.
You would have to develop a custom solution using the DataTables API functions here to get checkboxes instead.

Regards,
Tobias

Hi tobias!

No problem.

Thanks again

Hi,

sure! I hope that I can maybe make this possible in the future.

Best wishes,
Tobias

Hi Tobias,

I don’t know if it’s happening only to me but I didn’t make any changes on my table but all the sorting and filtering options that you gently helped me to set disapeared.

My table is accesible at:

https://motosport.seo4advisors.com/motos-en-venta/#lista de motos en venta

I tried to create other tables to make a test but the problem remains. It is weird because in the option of the table the “sorting” and “filtering” options are all enabled.

Best wishes,

Hi,

the reason for this is a problem in a JS file of the theme, specifically in the file wp-content/themes/bridge/js/custom_js.php.
That uses the variable $j for jQuery, but then actually uses $ in several places, but that’s a variable that does not exist. This breaks JS execution in the browser, so that the browser does not execute the TablePress JS code.
Depending on whether you added that code to that custom_js.php file or whether it is part of the theme, you can either change all $j and $ calls in that file to jQuery, or check if there’s maybe a theme update available already. Otherwise, you might want to report this to the theme developer.

Regards,
Tobias

Hi Tobias,

I didn’t modify the code of this php file, and I checked, I am using the latest version of the theme.

The file that I have to change:

wp-content/themes/bridge/js/custom_js.php

appears like this on Filezila:

<?php
$root = dirname(dirname(dirname(dirname(dirname(__FILE__)))));
if ( file_exists( $root.’/wp-load.php’ ) ) {
require_once( $root.’/wp-load.php’ );
// require_once( $root.’/wp-config.php’ );
} else {
$root = dirname(dirname(dirname(dirname(dirname(dirname(__FILE__))))));
if ( file_exists( $root.’/wp-load.php’ ) ) {
require_once( $root.’/wp-load.php’ );
// require_once( $root.’/wp-config.php’ );
}
}
header(‘Content-type: application/x-javascript’);

?>

var $j = jQuery.noConflict();

$j(document).ready(function() {
“use strict”;

<?php echo $qode_options_proya[‘custom_js’]; ?>
});

Unfortunately I don’t see the “$”, that I have to modify.

Thanks,

Hi,

ah, it looks like the code is in the theme options then. There should be a field somewhere with the content

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);}

That’s what you’ll have to modify.
Please change the three $ to $j there.

Regards,
Tobias

Hi Tobias,

When you say “the code is in the theme options”, do I have to find the right PHP file of my website to modify ?(that would mean, check them all from the begining)Or, is there any way to access to the theme option on wordpress and change it manually ?

Thanks,

Hi,

with “theme option”, I mean a setting in a the admin area of WordPress. The theme should have some input fields somewhere (maybe under “Appearance”, or in a custom admin menu entry), where you can enter JavaScript code.
If that is not the case, you will have to ask the theme developers about where the data for the variable $qode_options_proya['custom_js'] comes from and how it can be altered.

Regards,
Tobias