• 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

    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?

Viewing 15 replies - 1 through 15 (of 20 total)
  • 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.

    Thread Starter dlungaro

    (@dlungaro)

    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.DataTable

    http://i.imgur.com/bZP2sPX.png

    Thread Starter dlungaro

    (@dlungaro)

    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

    @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

    (@dlungaro)

    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_scripts

    Another option is add it to wp_footer hooks.
    Link: 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

    (@dlungaro)

    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' );
    ?>
    Thread Starter dlungaro

    (@dlungaro)

    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

    Thread Starter dlungaro

    (@dlungaro)

    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?

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

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