Dropdown filter from SQL

siemar14

I am wanting to filter my table with 2 drop down list using records and values from an sql query. I've populated my drop down however, it isn't filtering my table. I've looked at the example but it appends the drop down to the footer or header and I would like it above the table.
my js:

$.fn.dataTableExt.afnFiltering.push( function( oSettings, aData, iDataIndex ) {

var request_name= document.getElementById('requestor_name').value;

  } ); 
    $(document).ready(function() { 
    /* Initialise datatables */ 
    var oTable = $('#requestTable').DataTable(); /* Add event listeners to the two range filtering inputs */ 
    $('select#requestor_name').change( function() { oTable.fnFilter( $(this).val() ); } ); } ); 
  </script>

daniel_r

You can try out my yadcf plugin and its initMultipleColumns function (if you are using 1.10.xxx version of datatables)

See it in action http://yadcf-showcase.appspot.com/dom_multi_columns_tables_1.10.html

scroll down to see the code and read docs if relevant...

siemar14

Thank you, this is what i am looking for however i'm not sure how to combine the html with the javascript. what did you use to add the input fields at the top of the table? is there an example of this?

daniel_r

just go over the showcase samples and scroll down on those pages to see code samples and read docs...

siemar14

Thank you, this helped. I have one concern, when I place my filters, the display: inline block doesn't seem be working properly.

<div class="external_filter_container">
       
            <span id="request_id"></span>
            <span id="request_name"></span>
            <span id="direct_name"></span>

 </div>

I would like these all to be on one line and right now they are currently on separate lines.

daniel_r

how about

.external_filter_container span {
    display: inline-block;
}

if wont work you can provide a jsfiddle for a closer look