How to make childrow works ?

fmarguerie

I'm tying to use the childrow according to https://datatables.net/examples/api/row_details.html
but as soon as I add the <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
- My data* table is broken=> the filter zone disapears

see : http://live.datatables.net/jifijeji/1/edit

I have too to add a new colums empty <th></th>???

Regards ,
Françoi

kthorngren

but as soon as I add the <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Its hard to say what the problem is without seeing it. Please update your test case to show the issue.

Kevin

fmarguerie

here is a test case
http://live.datatables.net/fazijami/1/edit

the talbe is broken and I don't manage to make the childrow appear and work.

kthorngren

You have multiple issues. First use the browser's console to see errors that you are getting.

You placed your code in the CSS tab not the JS tab

You are getting this error:

jquery-3.5.1.js:4055 Uncaught TypeError: $(...).DataTable is not a function

This is due to duplicating the jquery.js and datatables.js includes. Only include them once. The other problem is the order. datatables.js requires jquery.js so jquery.js needs to be included first.

Once these are fixed you are getting this error.
>VM403:3 Uncaught SyntaxError: Illegal break statement

Its due to the comments surrounding the format() function. Just remove them.

The next error is:

TypeError: Cannot read properties of undefined (reading 'mData')

This is due to the number of columns in the HTML table is different than the number of columns in column.data. Also since you are trying to load the data via ajax you should remove the rows in HTML, including the `-tag tbody.

Once this is fix you are then getting this:

DataTables warning: table id=example - Ajax error. For more information about this error, please see http://datatables.net/tn/7

And in the console:

jquery-3.5.1.js:10099 GET http://live.datatables.net/ajax/data/objects.txt?_=1653927267299 404 (Not Found)

The path is incorrect. Unfortunately copying from the examples page sometimes need a bit of modification to work in the Datatables JS BIN environment. You can get a base template for using ajax in the JS BIN docs.

Here is the updated test case with all these fixes.
http://live.datatables.net/wifumuyo/1/edit

Kevin

fmarguerie

Hi, It worrks well for me nopw, , but one thing I don't unserstand is how would I guess that

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
was requested ?
thehttps://datatables.net/examples/api/row_details.html

talks only about

• https://code.jquery.com/jquery-3.5.1.js
• https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js

kthorngren

All of the examples have a CSS tab that shows the .css files needed to for the example. A better way to get the appropriate files is to use the Download Builder.

Kevin