Column filter on an object - unable to search on render

odessse

Hi all,

FOA my apologies for not posting the code in live datatable but I didn't find a way to include an ajax file :-(.

My problem: I added a serach on column header in my datatable which works perfectly on "plain" data but obviously fails when searching on the object property I am rendering. I tried to apply the orthogonal principle, defining the filter rendering (which works on "general search) but it doesn't work on column filter.

Any advice would be welcomed :-).

Ajax sample:

          {  "id": 1,
            "country": "USA",
            "city": {
               "id": 1,
               "name": "new york"}
         },
         {  "id": 2,
            "country": "USA",
            "city": {
               "id": 2,
               "name": "los angeles"}
         }

HTML file:

<div id="table_wrapper" class="dataTables_wrapper">
    <table id="test" class="display nowrap cell-border compact table-striped table-hover" style="width:100%">
        <thead>
            <th>Id</th>
            <th>Country</th>
            <th>City</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>  

js file:

$(document).ready( function () {

        // Setup - add a text input to each footer cell
        $('#test thead tr').clone(true).appendTo( '#consignationsT thead' );
        $('#test thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    var table = $('#test').DataTable({
        'dom': 'Bfrltip',
        'ajax': "data/data.txt",

                orderCellsTop: true,
                fixedHeader: true,
        'columns': [
            { data: 'id'},
            { data: 'country', title: 'Country'},
                    { data: 'city', 
                    title: 'City',
                            defaultContent: "",
                "render": {
                    _: function ( data, type) {
                            if(data == null){
                                return '';
                            } else {
                                return '<span title="' + data.id+ '">' + data.name + '</span>';
                            }
                                },
                            filter: function ( data, type) {
                                        if(data != null){
                                           return data.name;
                                        }
                            }
                   }
                      }     
        ],           
        'rowId': 'id',
        'select': true,
        'paging': true,
        'stateSave': true,
        'scrollY': "60vh",
        'scrollX': true,
        'scrollCollapse': true,
        'lengthMenu': [ 25, 50, 75, 100 ],
                  
        'columnDefs': [
            {
                'targets': 0,
                'visible': false,
            },
        ],  
    } );
});

colin

A good way to go with live is to remove the ajax, and just add data to include that ajax returned data. If you could do that, please, we're happy to take a look,

Colin

odessse

Hi Colin,

Sorry for my late reply :-). You are fast to offer help but I am slow to accept.

I created a case in lives: http://live.datatables.net/rovewani/1/

... Which is actually working. So I have to assume that the issue is coming from my implementation on actual objects... I have to check.