Unable to initialize

Unable to initialize

cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

I've created a table in HTML and added the two CDN references at the end as well as the Javascript command that identifies the table. However, none of the features show up on the page when I run it. I'm doing this inside a plugin that I've created in WordPress.

This question has an accepted answers - jump to answer

Answers

  • clin407clin407 Posts: 1Questions: 0Answers: 0

    Can you post your code?

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0
    | | V | | V
    Start Date
    document.write(datapt1);

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">

    $(document).ready( function() ( $("#safelist_id").DataTable(); ) );

    Everything from

    to

    seems fine because the table looks good. The last three lines where I try to implement the DataTable code don't seem to do anything. The table just looks the same. This code is included in a PHP plugin.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Looks like you are missing the Datatables JS include. Try using the Download Builder to obtain the required files

    Kevin

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

    It looks like my code got all messed up on the comment because I didn't do the back tick thing. Let's give this a try. First I define the table and that works fine. After my second table tag, I do this...

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js">
    
    $(document).ready( function() (
        $("#safelist_id").DataTable();
    ) );
    </script>
    

    I'm doing this inside a plugin that I wrote for my site which uses WordPress.WordPress

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Ah - yes. script tags are weird like that. You need to use:

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
     
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
     
    <script type="text/javascript" charset="utf8">
    $(document).ready( function() (
        $("#safelist_id").DataTable();
    ) );
    </script>
    

    John Resig (author of jQuery) wrote a great article about this way back in 2008, if you want more information.

    Allan

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

    No matter what I do I can't make the Data Tables features appear using the CDN code. I'm thinking of doing a local installation, but I'm not quite sure what all the steps are. I have the zip file in a local directory, but I'm not quite sure how to upload to the server. My site host is SiteGround and my CMS is WordPress.

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

    I got the DataTables folder uploaded to my Home folder on cPanel but still no luck. It looks like the code just isn't executing for some reason. SiteGround claims that jQuery is installed but I just don't know at this point.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you link to the page where you are attempting to use the CDN and I'll take a look? Without being able to see even the code you are using, there isn't really much I can say as to what might be causing the issue.

    Allan

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

    Here is all the code on my WordPress page:

    <strong>Test Data Page.</strong>
    
    <table id="safelist_id" class="display" style="font-size: 9pt">
        <thead>
            <tr>
                <th style="background-color: LightBlue">Start Date</th>
                <th style="background-color: LightBlue">End Date</th>
                <th style="background-color: LightBlue">Address</th>
                <th style="background-color: LightBlue">Resident</th>
                <th style="background-color: LightBlue">Make/Model</th>
                <th style="background-color: LightBlue">License</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2017-11-01</td>
                <td>2017-11-05</td>
                <td>123 Giant Ave</td>
                <td>James Dean</td>
                <td>Porsche Speedster</td>
                <td>RTE466</td>
            </tr>
            <tr>
                <td>2017-11-03</td>
                <td>2017-11-06</td>
                <td>1200 Speedway Blvd</td>
                <td>Richard Petty</td>
                <td>Dodge Daytona</td>
                <td>DBFLI95</td>
            </tr>
            <tr>
                <td>2017-11-05</td>
                <td>2017-11-07</td>
                <td>1955 Future St</td>
                <td>Marty McFly</td>
                <td>Delorean</td>
                <td>BAK999</td>
            </tr>
            </tbody>
    </table>
    
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
    
    <script type="text/javascript" charset="utf8">
    $(document).ready( function() (
        $("#safelist_id").DataTable();
    ) ); </script>
    

    The table displays fine but there's no Data Table enhancement. There's nothing else on the page, no plugins, no images, nothing. My site host is SiteGround.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Your code snippet doesn't show jQuery being loaded. Are you loading jQuery?

    Kevin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    SiteGround claims that jQuery is installed but I just don't know at this point.

    Being installed and being automatically accessed by your application are two different things. Ask SiteGround about it.

  • cmoorerw7datacmoorerw7data Posts: 7Questions: 1Answers: 0

    Voila. I was able to find a code snippet on the internet that showed me how to load jQuery. Here's the code after the table tag and it works.

    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script src="jquery.loading.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8">
    $(document).ready( function() {
        $("#safelist_id").DataTable();
    } );
    </script>
    

    All the features seem to be there so now I can try it on a bigger table.

This discussion has been closed.