CODEWITHSUNDEEP
htmldatatables
DJMcCarthy12
DJMcCarthy12

Reputation: 4119

Simple DataTables example initialization

I have a python-written application that is spitting out HTML files for a report and I want to get some of the output looking nicer, which I am trying to use DataTables for.

In testing, I have been unable to get even a simple DataTables example working, which I assume is just due to my overall lack of understanding of CSS/Javascript/Web Design. For the purpose of example, I have an extremely simple HTML table that I just want to get working with local DataTables files.

I have gone through the recommended setup for local files that can be found here: https://datatables.net/download/

Leaving most options as default, but electing to include JQuery as it is necessary. I downloaded the provided package and unzipped as instructed, leaving a directory structure as follows:

- root
    - test.html
    - DataTables\
        - DataTables-1.10.10
            - css\
                - ...
            - images\
                - ...
            - js\
                - ...
        - datatables.css
        - datatables.js
        - datatables.min.css
        - datatables.min.js

Here is test.html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

    <script type="text/javascript">


$(document).ready(function() {
    $('#example').DataTable();
} );


    </script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
        </tr>
    </tbody>
</table>
</body>
</html>

I figure I am missing something obvious, but I thought this would work. What's the catch? Thanks in advance for any advice!

Upvotes: 4

Views: 7122

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

jQuery DataTables is a jQuery plug-in, therefore you need to include jQuery before including jQuery DataTables as shown below:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

Upvotes: 3

Related Questions