How to highlight in hidden columns?

andrew45

I try to highlight searching results in a hidden column "description", but there was no highlighting.

It works only when I expand dropdown menu first and then search again.

How to highlight in hidden columns? I would like to expand and immediately see the highlighted values.

https://live.datatables.net/fuyedalo/1

allan

The search highlighting plugin doesn't currently take account of the hidden / Responsive columns I'm afraid. It would need to be updated to account for that.

Allan

andrew45

Thanks. Is there any alternative option now?

allan

Not as far as I am aware. It is open source though, so you could add support for this (I'd welcome a PR if you did so), or if you don't feel comfortable adding it, you can sponsor it's development.

Allan

kthorngren

Thought this might be a fun exercise. I updated this code block to use column().responsiveHidden() to see if the column is hidden. If so then first find any open child rows to find the li with the data-dt-column value that matches the index and use mark.js to highlight.

         {
            key: "mark",
            value: function mark() {
                var _this2 = this;

                var globalSearch = this.instance.search();
                $(this.instance.table().body()).unmark(this.options);
                this.instance.columns({
                    search: "applied",
                    page: "current"
                }).nodes().each(function (nodes, colIndex) {
                    var columnSearch = _this2.instance.column(colIndex).search(),
                        searchVal = columnSearch || globalSearch;
                    if (searchVal) {
                      if ( ! _this2.instance.column(colIndex).responsiveHidden() ) {
                        _this2.instance.rows( {page: 'current'} ).every( function ( rowIdx, tableLoop, rowLoop ) {
                          if (this.child.isShown() ) {
                            $('.dtr-details').each(function (node) {
                              $('li', node).each(function (index) {
                                if ( $(this).data('dt-column') == colIndex ) {
                                  $('span.dtr-data', this).mark(searchVal, _this2.options);
                                }
                              });
                            });
                          }
                        } );
                      } else {
                        nodes.forEach(function (node) {
                            $(node).mark(searchVal, _this2.options);
                        });
                      }
                    }
                });
            }

I tried calling draw() in responsive-display but that caused a stack overflow. Instead I used similar code above to traverse each li, get the column index then highlight either the column search or global search value.

table.on('responsive-display', function (e, datatable, row, showHide, update) {
    if ( showHide ) {
      var globalSearch = datatable.search();
      $('.dtr-details', $(row.node()).next() ).each(function (node) {
        $('li', node).each(function (index) {
          var colIndex = $(this).data('dt-column');
          
          var columnSearch = datatable.column(colIndex).search(),
                        searchVal = columnSearch || globalSearch;
          
          $('span.dtr-data', this).mark(searchVal, {});  // Duplicate mark.js options in second parameter
        });
      });

    }
});

Not sure if this is the best way but it seems to work. It only supports the default ul and li responsive rendering.

https://live.datatables.net/cobonocu/1/edit

Kevin

allan

Nice one!