Set select(dropdown menu) filters values

lucas84

Hello,

I'm trying to set the select filters(dropdown menus) with values coming from the server side. I can filter the columns using the search API, but I also would like to set the dropdown menus to display the applied filter value. Here is how I declare my Datatables:

$(document).ready(function () {

           //DataTables declaration
           var table =  new DataTable('#example', {
               statesave: true,

                     this.api()
                         .columns(':gt(0)') //Remove search select from column 0
                         .every(function () {
                             var column = this;

                             // Create select element and listener
                             var select = $('<select><option value=""></option></select>')
                                 .appendTo($(column.footer()).empty())
                                 .on('change', function () {
                                     column
                                         .search($(this).val(), { exact: true })
                                         .draw();
                                 });
                            
                             // Add list of options
                             column
                                 .data()
                                 .unique()
                                 .sort()
                                 .each(function (d, j) {
                                     select.append(
                                         '<option value="' + d + '">' + d + '</option>'
                                     );
                                 });

                         });                   
                   });
   
                   //initialize column search
                   table.columns([1]).search(mJSprojNumber).draw();        
         });

I searched through this forum a found a few posts with similar questions. I tried all that I could with no success.

This post seems a good approach, but I could not get it to work:

https://datatables.net/forums/discussion/66186/setting-a-select-option-value-on-load

Other discussions here, but also I could not make it work:

https://datatables.net/forums/discussion/comment/173923/#Comment_173923

I appreciate all the help.

lucas84

This is what I tried:

this.api().columns([1]).every(function () {
                       var column = this;
                       var select = $('<select id="col1"><option value=""></option></select>')

Then I would apply the value:

 $("#col1").val(mJSprojNumber").change();

kthorngren

The example linked in the thread you found does work. Its difficult to say why the same solution doesn't work for you with just seeing code snippets. For example I have no idea what value mJSprojNumber contains and if it is in the select options. Please provide a link ot a test case replciating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

$("#col1").val(mJSprojNumber").change();

Might be a typo but you have an open " following mJSprojNumber. This will cause a syntax error and maybe that's why your code isn't working. Look at the browser's console for errors.

Kevin

lucas84

Sorry, please see if this works: https://live.datatables.net/vasokeji/1/edit

kthorngren

This code isn't doing what you expect. It's not changing the select element to have an id attribute. Use the browser's inspect tool to verify this.

      this.api().columns([1]).every(function () {
                       var column = this;
                       var select = $('<select id="col1"><option value=""></option></select>')
                   });

If you want to use an ID you can use column().index() to get the index and create the ID in the loop creating all the select inputs. Something like this:

                         .every(function () {
                             var column = this;
                             var index = column.index();

                             // Create select element and listener
                             var select = $('<select id="col"' + index +'"><option value=""></option></select>')

Or you can change the selector from an ID to something that selects the correct select input, for example:

      $("#example tfoot select:eq(1)").val("System Architect").change();

I added this to the test case:
https://live.datatables.net/vasokeji/3/edit

Kevin

lucas84

This is fantastic! Thank you Kevin. As a side note I added a check, to confirm the value from the server side exists in the correspondent dropdown menu, before setting the value, because if you set a value that does not exist in the dropdown, it generates an error and the table becomes unresponsive:

 //Apply filter from server side values
                   this.api()
                       .columns([1])
                       .every(function () {
                           var column = this;
                           column.data().unique().sort().each(function (d, j) {
                               if (d == mJSprojNumber) { //Check if value exists in the drop menu
                                   $("#col1").val(mJSprojNumber).change();
                               }
                           });
                       }); //closing API