Custom toolbar Select field for search

leviar

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!

kthorngren

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

leviar

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