Datatable Filter listbox contain [object Object] when data: null is used for column

Lapointe

            columns: [ 
                {data: 'operations.Libelle' },
                {data: 'lots.Numero' },
                {
                    data: null,
                    render: function ( data, type, row ) {
                        return ((data.PresCiv.Libelle)?data.PresCiv.Libelle+' ':'')+data.prescripteurs.Nom+' '+data.prescripteurs.Prenom;
                    }
                },
                {
                    data: null,
                    render: function ( data, type, row ) {
                        return ((data.ProsCiv.Libelle) ? data.ProsCiv.Libelle+' ':'')+data.options.Nom+' '+data.options.Prenom;
                    }
                    ,editField: ['options.Nom', 'options.Prenom']
                },
                {data: 'options.Date'}
            ],
            
            order: [[ 6, 'desc' ], [ 5, 'desc' ]],
            columnDefs: [{target: [4,5,6,7]}],
....
            initComplete: 
                function () {   
                    if (savedSelected) {
                        this.api().rows(savedSelected).select();
                        this.api().state.save();
                    }               
                    
                    this.api().columns([0,1,2,3]).every( function () {// afficher les listbox de filtrage pour les colonnes concernées
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            column.data().unique().sort().each( function ( d, j ) {
                                var t = '<option ';
                                if ( (d) ){
                                    if  (savedColumnsFilters){
                                        if (savedColumnsFilters[column[0][0]].search.search == '^'+d+'$'){
                                            t += "selected='selected' ";
                                        }
                                    }
                                    select.append( t + 'value="'+d+'">'+d+'</option>' );
                                }
                            });
                    });
                }

kthorngren

The columns.data docs state this:

null - If columns.render is used, the data passed to the rendering function will be the original data source for the row.

For the rendered columns data is the whole row of data. So when select.append( t + 'value="'+d+'">'+d+'</option>' ); is executed d is the whole row of data. You will need to use cells().render() to get the rendered data for the select. Here is an example:
http://live.datatables.net/naxenole/1/edit

I took the code from the footerCallback example, created a rendered column, assigned it a class. Then in the footrCallback if the column has that class I use cells().render() to build the select. Otherwise it uses the code from the example.

Kevin

Lapointe

Hello Kevin
Nice to read your answer.
Just api.cells throw an error, and using this.cells work fine.

    if ( $(column.header()).hasClass('dt-render') ) {
        api.cells( null, this ).render('display').unique().sort().each( function ( d, j ) {
replace with 
    if ( $(column.header()).hasClass('dt-render') ) {
        this.cells( null, this ).render('display').unique().sort().each( function ( d, j ) {

Thanks for your help

Lapointe

Footer Callback sample is very interresting...
Thanks again

kthorngren

Just api.cells throw an error, and using this.cells work fine.

I have this at the top of initComplete:

       initComplete: function () {
          var api = this.api();

You are welcome.

Kevin