Customize Datatables shortcode
-
Hi Peter,
I am using a shortcode ‘wpdataaccess’ in a page and it is great enhancement!
I am able to styling it via css to align with the theme.In my website, I have to show data in different pages for different purposes.
I would like to customize the datatable removing paging, searching, filterings, labelings, column width and so on based on the purpose.
How should I do this? Can you provide me just an example?Regards
Raf
-
Hi Raf,
Interesting question!
For shortcode ‘wpdataaccess’ the plugin uses jQuery DataTables. The options you mentioned can be enabled/disabled when jQuery DataTables is intiated, see: https://datatables.net/reference/option/. The plugin initiates jQuery DataTables in file ‘wpda_datatables.js’. You could add your options there manually, but these settings would then be used in all DataTables, and that’s not what you want. Right?
If you need to enabled/disabled jQuery DataTables options per shortcode, the plugin needs to support some additional parameters. Shortcode ‘wpdataaccess’ can be called in two ways: (1) using a pub_id for a Data Publication and (2) adding arguments manually.
I prefer not to add these options as parameters for manual shortcode usage as I believe it’s a good idea to keep the number of shortcode parameters as low as possible.
I love to add these options to the Data Publisher for you as it will serve many other plugin users as well! It’s a great enhancement of the plugin. I do this in my spare time, so I cannot promise when it will be available, but it has my enthusiasm and will start working on it asap.
Thank you for your input. I’ll let you know when it is available!
Best regards,
PeterHi Raf,
I released the new version which has the options you asked for. They are available in the Data Publisher form. Great improvement! Thanks again for your interesting feature request! I haven’t added much documentation, hope it is intuitive enough to work with. If you have any question, please ask…
Best regards,
PeterHi Peter,
thanks very much for your quick reaction.Just a couple of points:
– With the new plugin version is no more possible to modify the publisher data. Could you please check it?
– It also good to have the possibility to delete the publisher item (new enhancement).Thanks in advance
Regards
RafHi Raf,
Can you see your publication? Are all checkboxes in section “Allow transactions?” enabled? (see Manage Plugin > Back-End Settings)
You should be able to edit a publication with version 2.7.3. If this does not work for you, can you send me a screenshot of table wp_wpda_publisher (or other prefix)? To create a screenshot navigate to WP Data Access > Data Explorer, search for table wpda_publisher, click Manage, click tab Columns and create a screenshot.
For row actions the plugin relies on the primary key or a unique index on a table. If you cannot edit or delete publications, your index(es) might be gone.
Best regards,
PeterThanks for the answer.
I have removed the checkboxes from settings. Now works.May I ask you an additional parameter for configuring the DataTable?
The auto-width property value in order to have the cells dimensioned on its content otherwise there is an overlapping between columns in case of long text.Regards
RHi Raf,
Make sure you have version 2.7.3 installed. Version 2.7.3 is the first version that supports manual addition/overwriting of jQuery DataTables options to your publication.
To add or overwrite the default jQuery DataTables options add a valid JSON string in column “Table options (advanced)”. Here are two examples:
{“stateSave”:false,”autoWidth”:true}
{“stateSave”:false,”bAutoWidth”:true}You can find all available jQuery DataTables options here:
https://datatables.net/reference/option/Best regards,
PeterHi Peter,
I have tried to use table option as you suggested and works fine using the Test Pubblication button.
While in the public page do not use this option as you can see here Calendario 2020 – http://www.runalltogether.eu/calendario-2020/
Any idea or suggestion how to fix it?Regards
RHi Raf,
You table looks good! 🙂
What version of the plugin are you using? Can you send me your table options?
BTW, you can change the setting of column “SitoWeb” in the Data Explorer (Manage > Settings) to use it as a hyperlink. The URLs will then be shown as hyperlinks in your table.
Bets regards,
PeterHi Peter, I am using the latest version of the plugin (3.0.0).
Thanks for the suggestion on the website link I am going to apply it.What I would like to do is to publish all the fields (included ones in the modal window) in the same table with each column auto-sized based on its content. For example “Solidale” could have half size based on its content.
If I do this now, the table becomes unreadable due to the overlap between fields (see overlapping2 attachment). Right now it already happens on some rows with the column “Gara” and “Solidale” (see overlapping attachment).
The table looks worst if I browse it via mobile web browser.
you can find pictures here:
http://www.runalltogether.eu/zra2_mobile/
http://www.runalltogether.eu/zra2_overlapping/
http://www.runalltogether.eu/zra2_overlapping2/
http://www.runalltogether.eu/zra2_publisher_settings/Regards
RHi Raf,
Add this to your css:
table.dataTable.nowrap td.Gara {
white-space: normal;
}
You need to do this for every column which you want to be wrapped!Not sure what your mobile layout will look like after this change. I guess the text will be spread over a large number of lines. Not so nice! Maybe you can find a way to create a mobile publication specifically for your mobile users? You would have two shortcodes on one page and have to decide which one is used according to the users browser type. Not sure how to do this. Does anyone reading this have a suggestion…?
Best regards,
Peter
- The topic ‘Customize Datatables shortcode’ is closed to new replies.