Adding Javascript data table into my wordpress site
-
Hey hows it going everyone. Basically I have a fully working Javascript data table with the data I want in it, the issue is actually getting it on my site. To see an example of what it is, I got it working on a github repository
That’s the site and repository with the code is here
As you can see the table is working completely fine, I just can’t seem to get it to work on my wordpress, any ideas?
-
Where – on what page or post – do you want to display that table?
Do you see any errors? Javascript or php errors?
I looked at it with the link you provided to http://zami77.github.io/GameStoreData/
What I’m asking is where on your WP pages or posts do you want the table to appear.
As to general layout of the table –
Letting the horizontal alignment of all fields default to center makes it harder to read than if you set them to left alignment. Also set your headings to left alignment – you will also have to eliminate left padding on your headings.
http://dansretrogamestash.com/game-stores/
right now I have the web page embedded from my git hub, but obviously it would be a lot better if it was actually on the site, also I’ll probably need to widen the content area, as it’s kinda cramped as of now. Sorry for the late response, the email sent to me telling me there was a response took forever, and I was already asleep by then haha.
and @ravin there were no errors, just nothing would show up, but I was most likely doing the whole process wrong.
Thanks again for all the help
EDIT: Text align to the left does make it a lot more legible, thanks for the tip!
A few choice to check if datatable script is present.
1. Try checking the datatables is loaded in the webpage. You could try checking in Developer Tools. F12 > Sources
2. Try pasting the datatables javascript directly into Console in Developer Tools. If the script is present it should load.
jQuery('#the-table-id').DataTable()
3. You should be able to check the datatable is present in jQuery. Type this into Console in Developer Tools.
jQuery.fn.DataTableSorry I’m very new to wordpress, where is the console? and where exactly whould I place the java script file, into my cpanel? (it’s currently in the public_html folder) or should it be posted in the actual page itself in the wordpress editor. and finally, do you have any idea on how to make the page content wider? as you can see right now the table is kinda cramped, and there’s wasted space on the right. THanks
@dlungaro, first you need to add the javascript to the template to load it. Maybe you want to elaborate on what you have done so far. Otherwise this could get very long.
Alright assume I’ve done nothing to load my Javascript file or the associated html file into WordPress. https://github.com/Zami77/GameStoreData There is the link to the index file and javascript file. nothing has been added to My site, because as of now, I just have a link on my site to my git hub
http://dansretrogamestash.com/game-stores/
I would like the data table on that page, instead of it linking to another site. So the data table is fully complete and functional, it’s just getting it to work on wordpresses site. Does that make sense? Thanks again for the help
You need to enqueue your javascript, so wordpress will load it.
Link:
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scriptsAnother option is add it to wp_footer hooks.
Link: https://codex.wordpress.org/Function_Reference/wp_footerExample:
<?php add_action( 'wp_footer', function() { ?> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.min.js"></script> <script src="src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js""></script> <script type="text/javascript"> jQuery('#table-id').DataTable({}); </script> <?php }, 9999);Hope this helps.
and where would I add this enqueue script? and where would I put the graphic.js file?
You could add it into functions.php
<?php function wp_add_scripts() { // get $post global $post; if( $post->post_name == "the_page_slug" ) { // name_of_script_you_want_to_give, path_of_script_template_directory, required_js_scripts wp_register_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery')); wp_enqueue_script('my_script'); } } add_action( 'wp_enqueue_scripts', 'wp_add_scripts' ); ?>functions.php of my theme’s directory? Thanks again, I will try this in a few hours, you’ve been a great help!
Yes. functions.php
Doesn’t he need a change somewhere else to cause the script tag to be written to the page where he wants the table?
Bob
after I put the enque script in my functions.php I copy and pasted the code from here
https://github.com/Zami77/GameStoreData/blob/gh-pages/index.html
into my pages text editor and nothing came up on the page, as in just the title of the page and that was it. any other ideas?
The topic ‘Adding Javascript data table into my wordpress site’ is closed to new replies.