Why is the dropdown box not showing (footer is present)?

julez247

Hello developers,

I ran into a problem with my code..
I simply want the dropdown menu's for custom filtering.
When I run the example on a simple table, it works.
But I use csv_to_html_table.js to fetch the data from a csv file.
And the dropdown menu's are not being displayed at all.
I guess it has something to do with the differnt type of creating the datatable?
I also read somewhere, it might not show up because there is no footer in the table.
So i appended a <tfoot> in the csv_to_html_table.js file as you can see. it shows the footer in Chrome's debug console.
But still no dropdown menu showing up..
i dont know.. this is probably just 1 line of code but I'm not good enough to figure out the mistake I made..
Please someone take a few minutes to help me out I've spent the last 2 days with this and I'm stuck.
And sry for my bad english btw.

The main html file with the code in it, as well as the csv_to_html_table.js are attached, also I tried attaching the csv file here, but the file format is not supported here unfortunately.

kthorngren

Looks like you need to add the columns in the tfoot. All you are adding is the tfoot itself. The column.footer() is looking for the th or td in the footer. See the column().footer() for more info.

Kevin

julez247

I tried this now by modifying the csv_to_html_table.json file.

It still doesnt work.

new file: https://we.tl/t-6smVZJFidC

kthorngren

I'm not sure what page that link is opening but I don't see a Datatable. Your generated footer should look like the footer in this example. Click the HTML tab to see the footer. Use the browser's inspect tool to see what HTML is generated for the footer.

If you still need help then please provide a running test case using one of the options list here:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

julez247

the link leads to my new modified .js file.. as I just wrote. You can not attach files in comments. that's why.

My footer looks now exactly like in the example you provided and it also shows up in Chrome's developer menu. But I get no dropdown menus.

kthorngren

For some reason the URL is changed to this and opens something that doesn't contain a Datatable:
https://wetransfer.com/downloads/ea93a2723a88c96ee9e546f5b3803fc020231107160843/fba449

You can not attach files in comments. that's why.

You can copy and paste them into the comment. The forum uses Markdown formatting. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

My footer looks now exactly like in the example you provided and it also shows up in Chrome's developer menu. But I get no dropdown menus.

Then there is something else wrong in the code. There is nothing obvious from the above. So we will need to see the issue to help debug the code. The best way is to build a test case we can debug and edit.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Just to make a quick check I created this test case:
https://live.datatables.net/vogatohi/1/edit

I copied your initComplete from the attached main.html and initialized it against a regular HTML table with a footer. The code works.

You need to make sure the footer exists before initializing Datatables which it looks like you are doing here:

           $table.append($tableBody);
           $table.append($tableFoot);

           $table.DataTable(datatables_options);

Do you get errors in the browser's console?

Can you update my example to show the issue?

Kevin