[Help Please?] Individual column searching (select inputs) with serverside processing not working me

TheWebDBGuy

Hello everyone!

I have been trying to get this to work for some time now. Over a week. I've gone to Google over and over. I can not seem to crack this. The main reason is my JavaScript skills are not very good. I'm also using a bootstrap that has a lot of pre written JavaScript that I did not write myself so that adds to the complexity. I've also added some my self and customized it quite a bit. I really need to get this to work and you all are my last and only hope!

The following code examples are set up for column filtering with text input. Could you please tell me how to revise this to allow for select input please? Your help would be sooo very appreciated! Thanks.

Here is my table code:

EDIT: I tried posting the table code here but it reads the html and does not post the html source.

Here is my JavaScript code:

$(document).ready(function() {

pageSetUp();

/* BASIC ;*/
    var responsiveHelper_dt_basic = undefined;
    var responsiveHelper_datatable_fixed_column = undefined;
    var responsiveHelper_datatable_col_reorder = undefined;
    var responsiveHelper_datatable_tabletools = undefined;

    var breakpointDefinition = {
        tablet : 1024,
        phone : 480
    };

/* END BASIC */

/* COLUMN FILTER  */
var otable = $('#datatable_fixed_column').DataTable({
    //"bFilter": false,
    //"bInfo": false,
    //"bLengthChange": false
    //"bAutoWidth": false,
    //"bPaginate": false,
    //"bStateSave": true // saves sort state using localStorage
    "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
    "autoWidth" : true,
    "processing": true,
    "serverSide": true,
    "ajax": "scripts/server_processing.php",

    "preDrawCallback" : function() {
        // Initialize the responsive datatables helper once.
        if (!responsiveHelper_datatable_fixed_column) {
            responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column'), breakpointDefinition);
        }
    },
    "rowCallback" : function(nRow) {
        responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
    },
    "drawCallback" : function(oSettings) {
        responsiveHelper_datatable_fixed_column.respond();
    },  
});

// custom toolbar
$("div.toolbar").html('<div class="text-right"><img src="img/logo.png" alt="" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');

// Apply the filter
$("#datatable_fixed_column thead th input[type=text]").on( 'keyup change', function () {

    otable
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();

} );
/* END COLUMN FILTER */   

})