Installation

danchi

Hello,
I had download Datatables, Searchbuilder and responsive
this is from my html
<link rel="stylesheet" href="~/lib/datatables.net-dt/css/dataTables.dataTables.min.css"/>
<link rel="stylesheet" href="~/lib/datatables.net-responsive-dt/css/responsive.dataTables.min.css" />
<link rel="stylesheet" href="~/lib/datatables.net-searchbuilder-dt/css/searchBuilder.dataTables.min.css" />
<script src="~/js/jquery-3.7.1.min.js"></script>
<script src="~/lib/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
<script src="lib/datatables.net-responsive-dt/js/responsive.dataTables.min.js"></script>
<script src="lib/datatables.net-searchbuilder-dt/js/searchBuilder.dataTables.min.js"></script>

But in developer console I got

Uncaught TypeError: $(...).DataTable is not a function
at DartDatatable.js:2:23

allan

Of you can provide a link to a test case we might be able to say why that is happening.

Allan

danchi

Hi Allan, it is on local machine, how I can manage the link, only some remote connection ?
I remember on old version we also had to include jquery.datatable.min.js, with new version . Seems like I missed some lib ?

danchi

I would like to understand how I can download libs and use them correctly, so to not get this error ? Or how I can simulate on live.datatables.net this ? since automatically is adding when I select diff lib, a little bit difficult to simulate ?

kthorngren

I tried loading dataTables.dataTables.min.js locally like you are doing and get the same error:

<script src="~/lib/datatables.net-dt/js/dataTables.dataTables.min.js"></script>

Maybe @allan can explain this file and why its not loading Datatables.

Try using the steps documented in the Local file installation docs and load datatables.min.css and datatables.min.js from the root of the download.

I remember on old version we also had to include jquery.datatable.min.js,

This is removed in 2.0.

Kevin

allan

dataTables.dataTables.js (and .min.js) is a styling file for DataTables default styles. More generally dataTables.{styleName}.js is the pattern for the styling integration files in DataTables. The DataTables one doesn't actually do anything since the core has its defaults already.

The styling files will automatically include the core if AMD or CommonJS loading is used. Likewise, the ES Module (the .mjs files) will automatically include DataTables core.

Direct loading in the browser of a styling file, will not automatically include the core file however.

Looking back at your code above, you probably just need to change:

<script src="~/lib/datatables.net-dt/js/dataTables.dataTables.min.js"></script>

to be:

<script src="~/lib/datatables.net-dt/js/dataTables.min.js"></script>

More generally, use the download builder to make sure you get the files you need.

Allan

danchi

Thank you very much, now it is clear how to use it. It is working now.