Column filtering and Ajax Loading

Column filtering and Ajax Loading

robovrobov Posts: 31Questions: 5Answers: 0

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 ?

Answers

  • robovrobov Posts: 31Questions: 5Answers: 0

    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>' )
        } );
    } );
    
    
        }
    
    
    
    
    }
    
    
    
    
    );
    

    } );

  • robovrobov Posts: 31Questions: 5Answers: 0

    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>')

  • robovrobov Posts: 31Questions: 5Answers: 0

    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>' )
            } );
        } );
        
                
            }
            
        
        
        
        }
        
        
        
        
        );
     
    
    } );
    
This discussion has been closed.