Server Side Individual Column Filtering (Drop Down)

Server Side Individual Column Filtering (Drop Down)

Rogue1Rogue1 Posts: 3Questions: 2Answers: 0

Hi, I am new to DataTables and I have been able to implement Column Filtering via search string and would like to use drop down instead, but have not been able to figure out how to get it to work. Below is my working Column Filtering via search string, and under that is the Column Filtering with drop down that I would like to implement server side. I'm sure I'm just missing something simple. Any help would be very appreciated.

Column Filtering via search string

$(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" placeholder="Search ' + title + '" />');
    });

    var table = $('#example').dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "server_processing.php",
        initComplete: function() {
            var api = this.api();

            // Apply the search
            api.columns().every(function() {
                var that = this;

                $('input', this.footer()).on('keyup change', function() {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
        }
    });
});

Column Filtering with drop down (Want to use server side)

$(document).ready(function() {
    $('#example').DataTable(         
       "processing": true,
        "serverSide": true,
        "ajax": "server_processing.php",{
        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>' )
                } );
            } );
        }
    } );
} );
This discussion has been closed.