Custom dropdown blank after entry number change

Custom dropdown blank after entry number change

LukasLLukasL Posts: 26Questions: 10Answers: 0
edited November 2021 in Free community support

Link to test case:
https://jsfiddle.net/s96t2hxe/1/

Debugger code (debug.datatables.net):

Error messages shown:
No error messages shown.

Description of problem:
I have set up a dropdown filter to the left of the entry number component:

When I change the entry number, the selected dropdown's text becomes blank:

While the dropdown is blank, if the user reorders columns or searches the table, all records disappear until a value in the dropdown filter is selected again:

Why is this happening? What is it about changing the entry number that causes the dropdown filter become blank? This does not happen if I don't prepend the dropdown to the entry component, but I have to do that because I want it to be on the left. My only goal here is I want the dropdown filter to be to the left of the entry component and functioning properly. Thank you.

Note: The datatable uses the bootstrap4 theme.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 14,616Questions: 25Answers: 3,469
    Answer ✓

    Don't why the select dropdown becomes blank but I suspect it is caused by being placed in the Datatables div.dataTables_length div:

    Use the technique to add custom toolbar components as shown in this example. You will need to use the dom option using the Bootstrap 4 styling. I updated your example:
    https://jsfiddle.net/zvdkb7m1/

    Kevin

  • LukasLLukasL Posts: 26Questions: 10Answers: 0
    edited November 2021

    Kevin, thank you for the solution. It was what I needed. You've helped me many times and I do appreciate it every time.

    I made some style adjustments I needed for anyone who wants the dropdown to be less wide: https://jsfiddle.net/47hwxt2z/

  • kthorngrenkthorngren Posts: 14,616Questions: 25Answers: 3,469

    Glad to help :smile:

    Kevin

Sign In or Register to comment.