MyThirdEye

Hey @fabbstar,

I had done that example using datatables, so using responsive options “scroller” or “stack”, using the hiding columns option will use a different table script which is footables. I will look into whether or not this is possible and get back to you.

Thanks
John

No problem, glad I could help 😀

Hey eemad,

You can create this exact table easily with jtrt responsive tables,

for example I made this table on my test website located here:
http://tables.johntendik.com/examples/

scroll all the way to the bottom where example 9 is shown.

Unless you theme has these styles already, you may need to add the following css code on your website. Normally the table will inherit your theme styles, but you can override them with custom css, here’s how:

#jtrt_table_88 td,#jtrt_table_88 th{
padding:8px;
border:solid 1px #ccc;
}

Change the number 88 to represent the table ID for your table. So for example if you shortcode is [jtrt_tables id=”10″] you need to change #jtrt_table_88 td to #jtrt_table_10 td

Hope this helps 😀

Thanks for using my plugin, im really glad it is useful!

John

My reply disappeared for some reason, here is a copy paste hopefully this works. WP forums wont let me add the comment.

Hey Simon,

Unfortunately, this feature is not part of the plugin, however I will add this to the feature request list. In the meantime, if you are comfortable with editing js files, you can add the following code to the jtrt-responsive-tables-public.js file on line 125:

if(getParameterByName('jtrt_dt_search') != undefined){ jtrtDTcopy.search(getParameterByName('jtrt_dt_search')).draw();}

then you need to create a function called getParameterByName which was taken from of StackOverflow 😀

function getParameterByName(name, url) {
			if (!url) {
			url = window.location.href;
			}
			name = name.replace(/[\[\]]/g, "\\$&");
			var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
				results = regex.exec(url);
			if (!results) return null;
			if (!results[2]) return '';
			return decodeURIComponent(results[2].replace(/\+/g, " "));
		}

I’ve created a simple gist with the changes, so if you want just copy paste the contents of the following gist into the jtrt-responsive-tables-public.js file and save changes.

https://gist.github.com/JohnTendik/9dc579512a20a86b830779ed477efd4c

now you can filter your table on load when you have the following url parameter:

http://mywebsite.com/jttablepage/?jtrt_dt_search=volvo

Hope this helps.

Thanks for using my plugin and offering suggestions 😀 I’m always looking for ways to improve. Let me know if there is anything else I can help you with.

John

gist:

https://gist.github.com/JohnTendik/9dc579512a20a86b830779ed477efd4c

Hello @loefke

Thanks for using my plugin, glad it is useful 🙂

So my first guess would be to change the text color using the text editor however I don’t think that will work with links. This is an interesting. I will create a feature request for this so that in the future user can change the color of the links from the backend.

But in the meantime, the way you can change the color link is adding inline css to the cell. When you add a link, it will turn your cell into something that looks like this:
<a href="#">my btn text</a>
simply add style attribute to this link element like so:
<a href="#" style="color:#f06d06;">my btn text</a>

Hopefully this helps 😀

Thanks again for using my plugin and providing feedback, I will look into making this more user friendly for future releases.

John

Hi Knud,

I have localized the data-tables strings for the front-end. You can now edit them from the .pot file directly. I hope this helps!

https://github.com/JohnTendik/jtrt-tables/blob/master/languages/jtrt-responsive-tables.pot

Or you can edit the front-end javascript file and change the values there

var jtrtDTcopy = mytablr.DataTable({
					"paging":isPaged,
					"ordering":isSorted,
					"searching":isfiltered,
					"info":false,
					"language": {
						"emptyTable":     translation_for_frontend.emptyTable,
						"info":           translation_for_frontend.info,
						"infoEmpty":      translation_for_frontend.infoEmpty,
						"infoFiltered":   translation_for_frontend.infoFiltered,
						"lengthMenu":     translation_for_frontend.lengthMenu,
						"search":         translation_for_frontend.search_string,
						"zeroRecords":    translation_for_frontend.zeroRecords,
						"paginate": {
							"first":      translation_for_frontend.first,
							"last":       translation_for_frontend.last,
							"next":       translation_for_frontend.next_string,
							"previous":   translation_for_frontend.prev_string
						},
					}
				});

Thanks for using my plugin, if you have any issues or comments please feel free to contact me 😀

John