multi select filter on rendered date column not working

cpshart

Hi

I have added 2 rendered date columns for year and month to my datatable, and the code controlling my multi select filtering works on all other columns but on the rendered columns which display correctly in the datatable, they display [object, Object] in the select list instead of the years and months respectively.

rendered data columns failing on multi select list

            { data: null, // year
             render: function (data, type, row) { return moment(row.dm_dividends.pdate).format('YYYY'); }
            },  
            { data: null, // month
                render: function (data, type, row) { return moment(row.dm_dividends.pdate).format('MM'); }
            },  

code controlling the multi select on columns

            initComplete: function () { // multi select column filter
            count = 0;
             this.api().columns([0, 1, 4, 5]).every( function () {
                var title = this.header();
                //replace spaces with dashes
                title = $(title).html().replace(/[\W]/g, '-');
                var column = this;
                var select = $('<select id="' + title + '" class="select2" ></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                      //Get the "text" property from each selected data 
                      //regex escape the value and store in array
                      var data = $.map( $(this).select2('data'), function( value, key ) {
                        return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                 });
                      
                      //if no data selected use ""
                      if (data.length === 0) {
                        data = [""];
                      }
                      
                      //join array into string with regex or (|)
                      var val = data.join('|');
                      
                      //search for the option(s) selected
                      column
                            .search( val ? val : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );
              
              //use column title as selector and placeholder
              $('#' + title).select2({
                multiple: true,
                closeOnSelect: false,
                placeholder: "Select a " + title
              });
              
              //initially clear select otherwise first option is selected
              $('.select2').val(null).trigger('change');
            } );
        },         

The above section of code needs to be able to support rendered columns or date columns in this case.

Any guidance on this would be appreciated.

Many Thanks

Colin

kthorngren

My guess is you would need to do something with moment but not sure without setting it up. My suggestion is to used console.log output to see what the value of d is on line 32. From there you can probably figure out what the data structure is so you can manipulate it accordingly. You could use an if statement to narrow down the output to the Year column.

Kevin

cpshart

Hi Kevin

Thank you for your help, I will take a look when I get back home and I will post my findings.

Best Regards

Colin