basic example with data table
basic example with data table
qwerf
Posts: 3Questions: 0Answers: 0
It would be nice a single page example with everything I need to make it work.
because when you say javascript new DataTable('#example'); that doesn´t work.
css https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css doesn´t either.
I have tried
<link href="https://cdn.datatables.net/v/dt/dt-2.0.2/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/dt/dt-2.0.2/datatables.min.js"></script>
<script src ="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.bootstrap5.js"></script>
<link herf="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link herf="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css" rel="stylesheet">
<link herf="https://cdn.datatables.net/responsive/3.0.0/css/responsive.bootstrap5.css" rel="stylesheet">
It doest´t either.
thanks in advance.
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Replies
this is the rest and it doesn´t work:
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
There are at least three issues I see off the bat. First you are loading datatables.js twice. Once in line 2 then again in line 5 of the first code snippet. Second is line 2 is loading before jquery.js so you should see an error in your browser's console stating something like this:
Third is the
script
tag initializing Datatables occurs before thetbody
so its executed before thetable
is placed in the document. Eith move thatscript
tag at the end of the page before the closingbody
tag. See this technote. Or place the initialization insidedocument.ready().If you still have troubles please build a test case showing the issues so we can help debug the code.
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
thanks a lot for your answer, I solved like this:
The original point from the OP is valid in my opinion. A simple one page solution to get me started has in fact eluded me as well. A working file I can drop onto my system would be a wonderful start.
I realize that what is here already should be it or close to it, but for each example, at least the simple ones, I think many people would find a completed solution a very big help
Thanks for the feedback. Part of the issue is that there are so many options. And for each option, there are a multitude of styles (Bootstrap 3/4/5, Bulma, etc) and light / dark mode. And many people (most? Unsure) aren't including libraries directly from the CDN now, but rather using npm and builder such as vite. So it wouldn't apply to them.
I don't really want to end up creating a web dev 101 course, that isn't in the scope of what I want to achieve with DataTables. But I do appreciate that it can be hard to get started (particularly with the mess that Javascript tooling is currently in).
Perhaps I need to do a "quick start from nothing tutorial" in the manual and build up options. I'll look into that - thanks.
Allan