Title: Adding Javascript data table into my wordpress site
Last modified: September 1, 2016

---

# Adding Javascript data table into my wordpress site

 *  [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/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
 * [Data table site](http://zami77.github.io/GameStoreData/)
 * That’s the site and repository with the code is [here](https://github.com/Zami77/GameStoreData)
 * 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?

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/page/2/?output_format=md)

 *  [bobnwp](https://wordpress.org/support/users/bobnwp/)
 * (@bobnwp)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461843)
 * Where – on what page or post – do you want to display that table?
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461844)
 * Do you see any errors? Javascript or php errors?
 *  [bobnwp](https://wordpress.org/support/users/bobnwp/)
 * (@bobnwp)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461846)
 * I looked at it with the link you provided to [http://zami77.github.io/GameStoreData/](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.
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461899)
 * [http://dansretrogamestash.com/game-stores/](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](https://wordpress.org/support/users/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!
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461903)
 * 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.DataTable`
 * [http://i.imgur.com/bZP2sPX.png](http://i.imgur.com/bZP2sPX.png)
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461904)
 * Sorry 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
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461924)
 * [@dlungaro](https://wordpress.org/support/users/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.
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461929)
 * Alright assume I’ve done nothing to load my Javascript file or the associated
   html file into WordPress. [https://github.com/Zami77/GameStoreData](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/](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
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461932)
 * You need to enqueue your javascript, so wordpress will load it.
    Link: [https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts](https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts)
 * Another option is add it to wp_footer hooks.
    Link: [https://codex.wordpress.org/Function_Reference/wp_footer](https://codex.wordpress.org/Function_Reference/wp_footer)
 * Example:
 *     ```
       <?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.
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461933)
 * and where would I add this enqueue script? and where would I put the graphic.
   js file?
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461935)
 * 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' );
       ?>
       ```
   
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461939)
 * functions.php of my theme’s directory? Thanks again, I will try this in a few
   hours, you’ve been a great help!
 *  [Ravin](https://wordpress.org/support/users/vinshaman/)
 * (@vinshaman)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461952)
 * Yes. functions.php
 *  [bobnwp](https://wordpress.org/support/users/bobnwp/)
 * (@bobnwp)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461954)
 * 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
 *  Thread Starter [dlungaro](https://wordpress.org/support/users/dlungaro/)
 * (@dlungaro)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/#post-7461963)
 * 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](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?

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/page/2/?output_format=md)

The topic ‘Adding Javascript data table into my wordpress site’ is closed to new
replies.

## Tags

 * [data table](https://wordpress.org/support/topic-tag/data-table/)
 * [form](https://wordpress.org/support/topic-tag/form/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 20 replies
 * 3 participants
 * Last reply from: [Ravin](https://wordpress.org/support/users/vinshaman/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/adding-javascript-data-table-into-my-wordpress-site/page/2/#post-7461968)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics