dropdown example

datatables.js

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" class="input is-small dt-input" placeholder="Search '+title+'" />' );
    } );
    
    $('#example tfoot th.dropdown').html( '<div class="control"><div class="select is-primary is-small"><select class="dt-input" ><option value="">Select a track</option><option value="Evil Walks">Evil Walks\t</option><option value="Snowballed">Snowballed</option></select></div></div>' );

    // DataTable
    var table = $('#example').DataTable( {
        "serverSide": true,
        "responsive": true,
        "ajax": "ajax/custom-filter.php"
    } );

    // Apply the filter
    $("#example tfoot .dt-input").on( 'keyup change', function () {
        table
            .column( $(this).closest('th').index()+':visible' )
            .search( this.value )
            .draw();
    } );

} );

table.html

<table border="0" class="display" id="example" width="100%">
    <thead>
    <tr>
        <th>ID</th>
        <th>Track Name</th>
        <th>Album</th>
        <th>MediaType</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>loading...</td>
    </tr>
    <tfoot>
    <tr>
        <th>ID</th>
        <th class="dropdown">Track Name</th>
        <th>Album</th>
        <th>MediaType</th>
    </tr>
    </tfoot>
    </tbody>
</table>