Conditional Formatting
-
Hey Peter,
really sorry to bother you, but I can’t get any further by myself.
I set up a small table and also got it to display on mobile properly.I want to format the last cell of each row (nth-child:(7)) in green, when the cellvalue is ‘approved’. And red when the cellvalue is ‘declined’.
For testing purposes I put in a random number in my last cell.I can’t get it to work via javascript or the datatables options.
Can you help me with that? I also don’t really understand the ‘table options’ formatting.Thank you really much for your effort with this plugin! :))
Marcel
The page I need help with: [log in to see the link]
-
Hi Marcel,
This is a tough one! You will not be able to do this with the current release. I had to add some javascript code to the plugin to make this work.
Here is a demo:
https://wpdataaccess.com/home/demos/demos-data-publisher/demo-shortcode-wpdataaccess-with-images/It shows three bikes with column brand type in the bike color (green or black). Reasonably comparable to your situation I think as the javascript code to make this happen uses the brand type to change the column style.
For this demo I added the following JSON to the table options advanced column:
{ “fnRowCallback”: “function(row, data, index) { if (data[1]==’Z 800 E ABS’) { jQuery(row).find(‘td:eq(1)’).css(‘color’,’black’); } else { jQuery(row).find(‘td:eq(1)’).css(‘color’,’green’); } }” }fnRowCallback is a callback function which you can use to format cells. Regarding your question about the table options format: make sure it is a valid JSON string. Write functions between double quotes. If you need to use quotes in your function, use single quotes.
Regarding the callback function:
– row refers to the current row (html) element
– data refers to the data of the current row (data[1] = value second column current row)
– selector td:eq(1) refers to the second column (html) of the current row element
Use .addClass instead of .css if you want to use css classes.Before you start you need to update the plugin. I patched the current version (I cannot uploaded a new version as I am in the middle of a major release change which I have to finish first). You need to delete the plugin first and then reinstall it. To prevent the plugin from deleting all your plugin settings and repository content, disable the checkboxes on the plugin settings page under tab “Uninstall” before you delete.
Thank you for bringing up this wonderful feature request! ?? It was a challenge to get it done and a great step forward…
I hope this helps you to get the job done. Let me know if you help.
Best regards,
PeterThank you for your nice answer Peter,
didn’t really expect such a cool response!
I can’t really go into detail about your answer today, but I will tomorrow.
One thing to add is, that the demo site currently isn’t working. The console on your provided link outputs this error: “Uncaught TypeError: b.fn.apply is not a function”
Datatable is also “processing”.
Have a good night. Marcel
Hi Marcel,
If you get this error you might need to remove your cache. Unfortunately the demo site is starting to get a bit slow. I guess I have to look for a better hosting service…
Best regards,
PeterHey again!
the solution provided by you did work really well! The RowCallback function was what I was refering to! Thank you really much.
Your solution provided one if/else statement. How would I go about formatting with multiple if/else statements.
{“fnRowCallback”: “function(row, data, index) { if (data[6]==’Gesperrt’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#c74a4a’);} Else if (data[6]==’Lizensierung erfolgt’) {Query(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#467bb8′);} Else if (data[6]== ‘Alle Daten vorhanden’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#48a360′);} Else if (data[6]==’Vor Verkaufsabschluss’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#e0da58′);} Else if (data[6]==’Verkauf erfolgt’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#d158a3′);} Else { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’white’);}}”}
Is this correct? I get a console datatable options error.
Marcel
Hi Marcel,
I don’t think your code is the problem. Your JSON looks correct. The database column in which the advanced table options are stored is too small! I just never expected people to add such huge options… ??
To solve this issue you need to expand the column length. You can use the following code:
alter table {wp_prefix}wpda_publisher modify column pub_table_options_advanced text;This is how:
– Open a new file in an ascii editor
– Paste the code above in your ascii file
– Add an empty line below the code
– Save your file
– Start the Data Explorer
– Click on button import data/execute scrips
– Select the file you just created and click import file/execute scripts
After that you should be able to store JSON strings up to 65,535 characters.Let me know if this works Marcel. I will of course add this update to the next release.
Best regards,
PeterIs this option really that huge? ??
You have a powerful library with datatables and there are cool options! If I would just know how to use them, as I am just a small student who is experimenting with websites as a hobby.Which file format would I go with, when exporting the ascii file?
Your script import allows sql and zip. I tried to save as .ascii & .sql., but console still giving error. I may have done smth. wrong.Looking forward for your update! ??
Marcel
Hi Marcel,
No, you’re right! You haven’t really added such a large options set. But I never planned to add jQuery DataTable functions. ?? Initially only options were supported and they usually are not very long. You were the first asking for function support. I love it! ??
Sorry I forgot to mention! You must save your file as .sql. You can download the file from here: https://pastebin.com/c99cCDwB
Make sure you rename it from .txt to .sql before you start the Data Explorer.Hope this helps…
Best regards,
PeterThank you really much!
I tried it, and the result is still the same. Downloaded your file, checked for the empty line, saved as .sql with notepad ++ and uploaded/executed the file. No errors.
Console output still: “WP Data Access ERROR: Invalid table options (advanced)”Marcel
Here is a link of the table in sql. Anything wrong here? Or can I change the value of the length?
Hi Marcel,
Your column is ok! Can you save the full JSON you sent me in the new column? And is that string on one line? If it contains a new line character you’ll get an error. This will be fixed in the next release, but your release requires to have the whol JSON on one line.
If your JSON contains no new lines and you are still getting an error, your function might have an error…
Best regards,
PeterHey Peter,
I sent you the wrong column. Should’ve sent you the column of my “Publish”. I can see the string in the database. I deleted all formatting. Problem still persisted. I also tested with a string that had the same length as my code and tried it with your example code. Problem didn’t exist.
So I guess that there is an error in my function. Sorry :(. I hope to get it resolved somehow.
Thank you for your effort! ??
Marcel
Good evening!
I finally got it resolved! Problem where some spaces that I didn’t put.
For anyone curious. Here is the code!
{ “fnRowCallback”: “function(row, data, index)
{ if
(data[6]==’Gesperrt’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#c74a4a’); }
else if
(data[6]==’Lizensierung erfolgt’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#467bb8′); }
else if
(data[6]==’Alle Daten vorhanden’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#48a360′); }
else if
(data[6]==’vor Verkaufsabschluss’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#e0da58′); }
else if
(data[6]==’Verkauf erfolgt’) { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’#d158a3′); }
else { jQuery(row).find(‘td:eq(6)’).css(‘backgroundColor’,’inherit’); }
}” }
Thanks alot for your help, Peter. I have learnt so much during the research and due to your answers.
Looking forward for your updates :).
Marcel
Great! Have a nice weekend Marcel! ??
- The topic ‘Conditional Formatting’ is closed to new replies.