Custom toolbar Select field for search

Custom toolbar Select field for search

leviarleviar Posts: 6Questions: 2Answers: 0

Hello everyone.

I used DOM to add a dropdown list above the table:

var table = $('#projects_table').DataTable({
    dom: '<"toolbar1">frtip',

    initComplete: function () {
        $('div.toolbar1').html('Position: <select id="projects_filter" name="year_filter"></select>');
      ...

which should take unique data from the second column of the table and filter the table upon selection.
But I'm struggling to make it work.
I have provided an example through the link.

https://live.datatables.net/ligasoke/1/edit?css,js,output

The handling of this dropdown list is at the bottom of the code. I don't understand why it's not working.

I would greatly appreciate any help!

Thanks!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    Answer ✓

    There are two issues. First you are appending to .appendTo('#projects_filter') which is creating a second level select list. Use the browser's inspect tool to see this. Second you should move the //select filter code into initComplete after creating the $('div.toolbar1') -div. Then append the generated select to the div.toolbar1 -div. Something like this:
    https://live.datatables.net/ligasoke/2/edit

    Kevin

  • leviarleviar Posts: 6Questions: 2Answers: 0
    edited September 2023

    Thank you, Kevin!
    This is what I need.
    I also thought somewhere in the same direction, but I don’t know JS well.
    But thanks to DataTables and an excellent community, my knowledge is growing)

    Evgeniy

Sign In or Register to comment.