Drop down filter from Editable (Server side) processing

esneaker

Greetings!!

1. Thank you for this awesome project! It's helped my site immensely!

2. I used the server-side editable example to get me started. https://editor.datatables.net/examples/simple/server-side-processing.html.
   Let's say for the sake of simplicity, I used your exact code from this page.

3. Hopefully, my question is simple: How do I filter(only show) the table by a "office" drop down list
   <label for="office">Office: </label>
   <select id="office" name='office' value=''>Select Office Location</option>
   <option value=''>Select Here</option>
   <option value='Tokyo'>Tokyo</option>
   <option value='London'>London</option>
   <option value='San Fransisco'>San Fransisco</option>
   ...etc
   </select>

I know this is done dynamically via the search box, but I want to limit the table response to just the selection in the drop down list. Meaning, I just want to search within "office" parameters. I've looked all over "google" and the internet at large...with no success.

I've tried( from another post):
$("select#office").change(function () {
var val = $("select#office option:selected").attr('value');
var regex = (val == "" ? "": "^"+val+"$");
editor.fnFilter (regex,0,false);
});

Any help would be awesome!! Thank you for your time!!!

esneaker

BTW...I'm brand new to Ajax, JQuery and Php. I've also looked at the individual column filter. That seems to be exactly what i want to do. But I've tried to implement the:

initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

on the server example, and it does not work. It only shows the header and footer. I just don't know where to place the api.
2. How do I just get one column, and not all?

Thanks again!