How to start with DateTables?

MihajloA

Hi all,

I need to create table that can update, filter and sort table rows. My mentor said me that DateTables plugin is best for this job.
I followed step by step installation page and it doesn't work.
I putted this in my HTML head

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
Then I added jQuery to my website, and last step i put this in my script.js:
$(document).ready( function () {
$('#table_id').DataTable();
} );

Please help!

kthorngren

Looks like you are starting with something like the Zero Config example. Is your table already populated in HTML like the example?

Did you add jQuery before you loaded 'jquery.dataTables.js'?

Order is important. You can use the Download Builder to get all the include JS and CCS files you need.

and it doesn't work.

Please describe what isn't working.

Do you get any popup alerts or error messages on the browser's console?

Kevin

MihajloA

I will put you picture of my code and what heppend when i try code ![
https://imgur.com/a/KGpW44X

kthorngren

Seems like that should work. Do you have any errors in your browser's console?

You probably should move this part:

<script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>

To the bottom of your page, just above </body>. If you still can't make it work please copy your code into this test page:
http://live.datatables.net/

Remove everything from the HTML and JavaScript tabs then paste your code into the HTML tab. Please post the updated URL and we can help.

Kevin

MihajloA

https://imgur.com/a/VLohZlP
http://live.datatables.net/cuqodehi/1/edit

kthorngren

Here is the updated working example:
http://live.datatables.net/tejogowu/1/edit

I removed everything from the JavaScript tab. The problem with your example is the path to the JS and CSS files. You have:

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

The live.datatables.net site can't find the files at those locations. I updated the paths to something the site can get to:

  <link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/css/jquery.dataTables.css"/>
  <script type="text/javascript" src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

Your screenshot indicates the same. I assume that is from your site not the example. I assume you have local copies of the datatables.min.css and datatables.min.js files. You need to validate the path to them.

Kevin

MihajloA

Thank you wery much Kevin!!!
How now I can edit CSS?