is there a chance to have / implement child rows with Javascript (array / objects)?
is there a chance to have / implement child rows with Javascript (array / objects)?
holstyBoy
Posts: 9Questions: 3Answers: 0
hi datatable enthusiasts,
i would love to implement the child row feature BUT my data are coming in with a javascript array ( data: customerData)...
all the examples are on ajax... i did spent already some extensive time to try to get it to work, but guess what: no success!
hm, my app foundation is wordpress, which may make it a little bit more complex, than a pure html / javascript environment.
any chance for it? instead of hidding columns and use the row click feature to bring up a modal window to show the rest (details) of the full record.
any tipp, hint, advise would be very much appreciated.
cheers
tomek
This question has an accepted answers - jump to answer
Answers
It is exactly the same as for Ajax, but instead of using
ajaxto load the data, usedata. See for example: https://live.datatables.net/fijipiwi/1/edit .If you can't get it to work, please link to a test case showing the issue so we can offer some help.
Allan
hi allan,
it seems like i am to "blond" to get it going... i am embarrassed to ask one more time, but having spent the whole afternoon to get it going as your kind examples was / is leading me. i got stuck with a system message letting me know that there is an unknown parameter for row 0, column 8 and a second message with the same reading but row 406 and column 8 (row numbers are random but always just for 2 rows). then its initialising the entire table (2172 records) and everything works!
i did convert the received php array into an javascript (map) object:
php: 1,,,,ABM Fahrzeugtechnik GmbH,Krummholzstr. 5,79206,Breisach,,,,,,,2024-06-17 19:36:13
resultiing in
js: variable tableData
i.e. {id: "1" - etc.
my datatable (partly) initialisation:
´´´
// define datatable contacts
let table = new DataTable('#contacts',
{
data: tableData,
select: true,
lengthMenu: [5, 10, 15],
language: {
url: 'https://cdn.datatables.net/plug-ins/2.0.8/i18n/de-DE.json',
},
columns: [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: ''
},
{data: 'surname' },
{data: 'firstname' },
{data: 'company' },
{data: 'street' },
{data: 'zipcode' },
{data: 'city' },
{data: 'phone' }
],
´´´
what am i doing wrong? i do hope you stay nice with me....
cheers & have a wonderful evening
tomek
Did you read the technote linked in the error?
https://datatables.net/manual/tech-notes/4
Your config shows 8 columns, column indexes 0-7.
Column 8 is the 9th column. How many columns do you have defined in the HTML
thead? Make sure it matches the number of columns defined incolumns. Looks like you might have 14 or 15 columns of data in this:Since you converted to objects the
column 8is a bit confusing. Suspect there is an inconsistency or mismatch between the columns defined in HTML,columnsand the JSON response.You can look at the returned ajax JSON with the browser's network inspector.
row 406is a zero based index so you would look at the 409th JSON row. Make sure it looks correct.If you still need help then please post your complete HTML table definition, Datatables initialization code and an example, from the browser's network inspector, of a row indicated in the error. Better is a link to your page or test case replicating the issue.
Possibly you can run the debugger and provide Allan with the generated ID. There might be enough to allow him to see the issue.
Kevin
hi kevin,
thank you so much for pointing me into the right direction!!!! i owe you a glas of milk!!!!
from my prevoius datatable intialisation i had still a columnsdef section with was refering to a "no longer exisiting" thead column!!!
removing the columsdef section, guess what, all is working perfectly!!!!
i am so grateful - you may not anticipate...
cheers & have a wonderful time
tomek