DT::datatables() generated html table shows display anomalies (missing characters) when column level search is used

Question

I am trying to put interactive, sortable tables in html summaries produced by using rmarkdown::render from an R script. For producing tables I am using datatables() from DT package. Reports are generated fine and tables look pretty good, until you do a column level filter/search, after which display shows some funny problems. My question will become clearer with the following example.

#' ---
#' title: "Test"
#' author: test
#' output: 
#'   html_document:
#'     toc: true
#' ---

#' <style type="text/css">
#'   .main-container {
#'     max-width: 1200px;
#'     margin-left: auto;
#'     margin-right: auto;
#'   }
#' </style>

#' ### Test data

#+ setup, include=FALSE, echo=TRUE
require(dplyr)
require(DT)
knitr::opts_chunk$set(echo = TRUE)

#+ core_code, include=FALSE, echo=TRUE 
plants <- read.csv("https://vincentarelbundock.github.io/Rdatasets/csv/cluster/plantTraits.csv")
plants<- plants %>% 
  mutate( ID = paste0("ID_" , sprintf("%04d", 1:136)  )  ) %>%
  select(ID, X:unsp)

#+ test_table, echo = FALSE
datatable( plants ,
           extensions = c("Buttons" , "FixedColumns"),
           filter = 'top',
           options = list( autoWidth = TRUE , 
                           dom = 'Blftip',
                           pageLength = 100,
                           searchHighlight = TRUE,
                           buttons = c('copy', 'csv', 'print'),
                           scrollX = TRUE,
                           fixedColumns = list(leftColumns = 2)),
           class = c('compact cell-border stripe hover') ,
           rownames = FALSE) 

Produces the table (screenshot):

If I do a search for 048 in the ID column, it shows the right row, like this...

But then, if I cancel the filter, and bring all the rows back, rows have characters missing from ID column.

This would happen to any column that I search, or any other data. It does not happen if I use the main search box (at right side top corner). I am running RStudio(Version 1.1.463) on Mac(OS X 10.11.6) but I have tested the produced html file on Chrome, Safari, and RStudio inbuilt browser on Mac; and Chrome and IE on Win7. Any clues about how to address this?

Answer 1

This is not really a solution, but more of circumventing the problem. Since there were no suggestions, I starting disabling all the options I was using and it turns out that it was the highlight search results that was causing the issue. So if I do:

#+ test_table, echo = FALSE
datatable( plants ,
           extensions = c("Buttons" , "FixedColumns"),
           filter = 'top',
           options = list( autoWidth = TRUE , 
                           dom = 'Blftip',
                           pageLength = 100,
                           searchHighlight = FALSE,
                           buttons = c('copy', 'csv', 'print'),
                           scrollX = TRUE,
                           fixedColumns = list(leftColumns = 2)),
           class = c('compact cell-border stripe hover') ,
           rownames = FALSE) 

It works fine now.