Difficulty implementing jQuery Datatables

Question

Evening all,

I am trying to add the "datatables" jQuery script to my website however I can't get it to work at all!

From reading the instructions I need to download the latest version of jQuery production and put in the same folder as the page I'm trying to use it on. e.g. the file is in Pages > jquery-3.1.0.min.js

I should then include this in the header of the file I am using see "jQuery Link" comments in the code below

After this I should then download datatables as I would like it from the builder e.g: https://datatables.net/download/ - I have opted for the local files as the site is for internal use only so no need to access resources online. So now my folder structure looks like Pages > DataTables > ...

So now I add the JS and CSS to the header as well see "jQuery CSS" and "jQuery JS" comments in the code below

I then draw the table as required by datatables see "Table start" "Table End" comments in the code below

I then call the JS see "Call script start" "Call script end" comments.

Now when I run this page there is no formatting at all on the table?!

I am sure I'm missing something very simple!

<!DOCTYPE html>
<head>
    <!-- jQuery Link -->
    <script src="jquery-3.1.0.min.js"></script>

    <!--jQuery CSS -->
    <link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

    <!--jQuery JS -->
    <script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
</head>
<body>

<!-- Table start -->
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>
<!-- Table end -->

<!-- Call script start -->
<script>
$(document).ready( function () {

$('#table_id').DataTable()

} );
</script>
<!-- Call script end -->
</body>

</html>

Have just amended that above now thanks for pointing out didn't realize I had it written like that! But anyway still same result no formatting on the page?! — bepster
– bepster, Commented Sep 11, 2016 at 20:31
Your code seems to work: jsfiddle.net/ohy2xtud Is there any console output? Maybe you have problems including your scripts/stylesheets. Are you sure that /DataTables/datatables.js is the correct way to reference your script file (same with the css)? you would look in the web root directory and not in the project directory as with jQuery — Michael Troger
– Michael Troger, Commented Sep 11, 2016 at 20:39
When I run through the downloader: datatables.net/download It gives you the CSS and JS links at the bottom and these are the exact links I am using. I have CSS referenced in separate folders that work fine e.g. ../styles just the jQuery. — bepster
– bepster, Commented Sep 11, 2016 at 20:49
Try to include your links remotely: cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/… cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/… That should work. You can still download them afterwards if that works — Michael Troger
– Michael Troger, Commented Sep 11, 2016 at 20:50

Michael Troger · Accepted Answer · 2016-09-11 21:06:02Z

1

Your code seems to work: http://jsfiddle.net/ohy2xtud/ Is there any console output? Maybe you have problems including your scripts/stylesheets. Are you sure that /DataTables/datatables.js is the correct way to reference your script file (same with the css)? you would look in the DataTables folder of your web root directory and not in the project directory as with your jQuery file.

I would try to include your links remotely:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js

That should work. You can still download them afterwards if that works. For local file offering you would need to tell us the exact project structure. Are all the scripts and stylesheets in the same directory as your HTML file? Also you can try to use the CDN versions locally instead of the generated files from datatables.net

answered Sep 11, 2016 at 21:06

Michael Troger

3,5272 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bepster Over a year ago

Cheers for help much appreciated! issue was as you said /DataTables/datatables.js was the incorrect way to reference the files. re downloaded files into root and linked directly to them and it worked perfectly!

Diego Gallegos · Accepted Answer · 2016-09-11 20:35:26Z

0

Add the table class to the table tag if using Bootstrap 3 else you will have to provide your own styles. Try to add a link tag like this to import bootstrap and add the class :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

answered Sep 11, 2016 at 20:35

Diego Gallegos

1,7522 gold badges19 silver badges31 bronze badges

2 Comments

bepster Over a year ago

I have tried adding this line with no luck cheers though. also I am trying to keep it all on the local server though as the site is only for internal staff and as far as I understand everything can be kept in the local directory?

Diego Gallegos Over a year ago

Yes you can download bootstrap on you server.

Collectives™ on Stack Overflow

Difficulty implementing jQuery Datatables

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related