Column filtering and Ajax Loading

robov

I am trying to get the code working on page: http://www.datatables.net/examples/api/multi_filter_select.html
with an ajax loading the data.
I searched the forum, but the answers seem to reflect a different version of the datatables. (tried them too, but failed)

When I load the data with ajax and use the multi-filter I see the select boxes, but no values in the select

Any suggestions ?

And a suggestion how I can add the selectbox to only 1 column ?

robov

Aha... found the first part of my question on how to get teh values in the column
I had to insert the code in the initComplete call (code below)
Now only have to figure out how to do it on only 1 column.

$(document).ready(function() {
var table = $('#example').DataTable(
{
"sAjaxSource": "mydatasource.php",
"initComplete": function
( )
{

$("#example tfoot th").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            var val = $(this).val();

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

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


    }




}




);

} );

robov

haha... I am on a roll...
Maybe not the most efficient way (suggestions welcome)
But what I do now is include a column selection. If the column is not what I need, then return.

Code:
$("#example tfoot th").each( function ( i ) {
if (i!=4){return;} <== only do the filtering for column 4
var select = $('<select><option value=""></option></select>')

robov

full code , hopefully with better markup for reference

$(document).ready(function() {
    var table = $('#example').DataTable(
    {
    "sAjaxSource": "../libs/mxMailer/classes/dtCampaigns.php?DATA=JSON&CTYPE=MAIL",
    "initComplete": function 
        ( )
        {
        
    $("#example tfoot th").each( function ( i ) {
    if (i!=4){return;}
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                var val = $(this).val();
 
                table.column( i )
                    .search( val ? '^'+$(this).val()+'$' : val, true, false )
                    .draw();
            } );
 
        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
    
            
        }
        
    
    
    
    }
    
    
    
    
    );
 

} );