поиск по отдельным столбцам (выберите вход) не работает должным образом с HTML-тегами

Question

Я использую datatable в своей таблице, и моя таблица td содержит теги html (label), но в первом раскрывающемся списке не отображаются уникальные значения. Как мы можем этого достичь? Пожалуйста, проверьте мой Скрипка

var jQ = $.noConflict(true); 
 jQ('#table').DataTable({
                // "pageLength": 50,
                responsive: true,
                "paging": false,
                // fixedHeader:true,
                orderCellsTop: true,
                initComplete: function () {
                    this.api().columns([0,1,2,3]).every( function () {
                        var column = this;
                        var select = jQ('<select><option value=""></option></select>')
                            // .appendTo( jQ(column.header()) )
                            .appendTo( jQ("#table thead tr:eq(1) th").eq(column.index()).empty() )
                            .on( 'change', function () {
                                var val = jQ.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
         
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );
                            jQ( select ).click( function(e) {
                                e.stopPropagation();
                          });
         
                        column.data().unique().sort().each( function ( d, j ) {
                            //console.log(d);
          select.append( '<option value="'+d.split(">")[1].split("<")[0]+'">'+d.split(">")[1].split("<")[0]+'</option>' )
                        } );
                    } );
                },                 
                // "pagingType": "full_numbers",
                autoFill: true,           
                dom: 'Blfrtip', 
               
                
               
            }); 

Answer 1

Я решил проблему с помощью кода ниже. Пожалуйста, найдите обновленную скрипку здесь

jQ('#table').DataTable({
                // "pageLength": 50,
                   autoWidth:true, 
                  fixedColumns: true,
                  columnDefs: [
                  { "width": "15%", "targets": [0,1,2,3,4,5] },
                 
                ],
                responsive: true,
                "paging": false,
                fixedHeader:true,
                orderCellsTop: true,
                initComplete: function () {
                    this.api().columns([0,1,2,3]).every( function () {
                        var column = this;
                       var uniqueNames = [];
                        jQ.each(column.data(), function(i, el){
                         if(jQ.inArray((jQ(el).text()), uniqueNames) === -1)
                           uniqueNames.push(jQ(el).text());                         
                        });
                       console.log(uniqueNames.sort());
                        var select = jQ('<select><option value="">Show all</option></select>')
                            // .appendTo( jQ(column.header()) )
                            .appendTo( jQ("#table thead tr:eq(1) th").eq(column.index()).empty() )
                            .on( 'change', function () {
                                var val = jQ.fn.dataTable.util.escapeRegex(
                                    jQ(this).val()
                                );
         
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );
                            jQ( select ).click( function(e) {
                                e.stopPropagation();
                          });
                            
                      jQ.each(uniqueNames.sort(), function( index, value ) {
                        console.log(value);
                        select.append( '<option value="'+value+'">'+value+'</option>' )
                      });
                          
                    } );
                },                 
                // "pagingType": "full_numbers",
                autoFill: true,           
                dom: 'Blfrtip',  
            });