Unable to initialize

cmoorerw7data

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.

clin407

Can you post your code?

cmoorerw7data

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

kthorngren

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

Kevin

cmoorerw7data

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

allan

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

cmoorerw7data

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.

cmoorerw7data

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.

allan

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

cmoorerw7data

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.

kthorngren

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

Kevin

tangerine

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.

cmoorerw7data

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.