Basic initialization question

tomcat14

I am new here and just getting started using DataTables. I have the read a lot on here but now I am trying to get it working. So, I first downloaded the css and js files and added a these 2 lines to my html:

<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css">
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>

I also added what appears on the installation page to the scripts part of my html:

<script type="text/javascript" class="init">
$(document).ready( function () {
    $('#table_id').DataTable();
} );
</script>

I have coded the table as mentioned with thead, tbody and tfoot.
When I load the page it appears that that the css is found because it has the styles correct but the DataTable functions are all missing and when I look at the Developer Tools for Chrome and on the console I find the message Uncaught ReferenceError: jQuery is not defined. So, I am missing something.
If I use some code I found from one of the examples that is doing a range on one of the columns and use this script instead the DataTables functions are all there and work:

<script type="text/javascript" class="init">
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      return true;
    }
  );
  $(document).ready(function() {
    var table = $('#example').DataTable();
    $('#min, #max').keyup( function() {
      table.draw();
    } );
  } );
</script>

I have tried several different things but using the bottom code is the only way I have gotten it to work.

What am I missing that the top script fails and the bottom does not? I don't know very much about jQuery and not completely comfortable with JavaScript but I do understand it somewhat and can usually figure out what a function is doing. I know that the script that works have references to items that are not on my page but it doesn't seem to cause a problem but if I remove part of it the DataTables functions don't work.

Any help for a newbie would be appreciated.

Edited by Allan to add syntax highlighting.

allan

I find the message Uncaught ReferenceError: jQuery is not defined. So, I am missing something.

Sounds like jQuery is missing . DataTables requires jQuery.

If you don't already have jQuery on your page, you can build a custom DataTables package with it included.

If I use some code I found from one of the examples that is doing a range on one of the columns and use this script instead the DataTables functions are all there and work:

Perhaps it is an execution order issue. Without a test case (which the forum rules ask for for a reason ) I can't say for sure, but perhaps check that jQuery is being loaded first.

Allan

tomcat14

Ok, went through the custom build package. Downloaded it and changed my lines to point to the new downloaded files.

When I run, the style is there, the functions are not, but I also do not have any errors.

I validated that the table name referenced matches the id of the table.

I am apparently still missing something but have no idea what to look for?

You mention a test case, how would I provide that? Do you want me to post the page as it is presented to the browser? That I can easily do. The page is on a secure site and therefore I have no way of placing a url here that could be used to run the page.

tomcat14

Since I haven't seen another reply to this, here is the html page. I have links to a local copy of the css and js so you will probably have to change those to match your location but at least you can see what I have and maybe explain what is missing.

kthorngren

This tech note will help with setting up a test case:
https://datatables.net/manual/tech-notes/10

If you use live.datatables.net it will have a base to start working from or you can delete wha't there and add your own code.

Kevin

tomcat14

Kevin,

While you didn't answer my question you pointed me in a direction that I was able to discover my own misspelling. So, thanks for that.

In my first post I still had the table_id the same as the script presented on the html page here. When I changed it I mistyped it and therefore it would never work. Someone would have to take a very close look at what I uploaded to spot it. The other thing I noticed is what is on the initialization page is different than the JavaScript on the live.datatables.net page. I switched to what is on the live.datatables.net page and it works.