Hello,
I would like to dynamically filter another DataTable in another tab on my Shiny application. My issue is that, due to the fact the Shiny generates new HTML links everytime the app runs, only the links concatenated in my first datatable that direct me to the next tab seem to work. I am working with a navbarPage with multiple tabPanels, with each navbarPage the first one has a table that communicates with the next tab (and filters that value in the next data table, as in to show data details of the repository). Only my first navbarPage works (and continues to work), by correctly filtering the values in my next tab and datatable. Here is the code I use to concatenate the links that filters my next table:
Table_cod_vector <- data.table(Cod_Vector = unique(catalogo_vectores_DWH_catalogoatributos$Cod_Vector), Detalle_Vector = paste0("<a href='#gps_dwh_atributos'",
"alt='", unique(catalogo_vectores_DWH_catalogoatributos$Cod_Vector),"'",
"onclick=\"",
"tabs = $('.tabbable .nav.nav-tabs li');",
"tabs.each(function() {",
"$(this).removeClass('active')",
"});",
"$(tabs[1]).addClass('active');",
"tabsContents = $('.tabbable .tab-content .tab-pane');",
"tabsContents.each(function() {",
"$(this).removeClass('active')",
"});",
"$(tabsContents[1]) .addClass('active');",
"$('#gps_dwh_atributos') .trigger('change').trigger('shown');",
"Shiny.onInputChange('cod_vector', getAttribute('alt'));",
"\">",
1:length(unique(catalogo_vectores_DWH_catalogoatributos$Cod_Vector)),
"</a>"))
output$gps_dwh_vectores <- DT::renderDT({Sys.sleep(1) # System sleeping for 1 second #
DT::datatable(right_join(Table_cod_vector, catalogo_vectores_DWH_catalogovectores[,input$show_varsdwh1, drop=TRUE], by = c("Cod_Vector"))
,filter = list(position = 'top', clear = TRUE),
rownames = TRUE, escape = FALSE,# Don't escape any HTML in the table (i.e. the actionButton)
options = list(pageLength = 10,
searching = TRUE,
language = list(
info = 'Catalogo de vectores. El boton de Vista_Previa debajo presenta una muestra aleatoria de los vectores que se encuentran actualmente disponibles, desarrollados por la Gerencia de Planes Selectivos, a fines de visualizar la estructura generica y atributos contenidos en cada uno de ellos.',
paginate = list(previous = 'Volver', `next` = 'Siguiente')
),
initComplete = JS(
"function(settings, json) {",
"$(this.api().table().header()).css({'background-color': '#32475d', 'color': '#fff'});",
"}"),
autoWidth = TRUE,
width="1000px",deferRender=TRUE,search = list(regex = TRUE, caseInsensitive = TRUE),
scrollX = TRUE,scrolly = T,selection = "none", # turn off row selection otherwise you'll also select that row when you click on the actionButton
lengthMenu = c(10,20,50,100,200),
columnDefs = list(list(width = '900px', targets = list(11,12,13,14)), list(width = '500px', targets = list(5,28)))
))
})
which would then filter my next table that responds to the alt value (cod_vector) generated during the click event:
output$gps_dwh_atributos <- DT::renderDataTable({Sys.sleep(1) # System sleeping for 1 second
if(is.null(input$cod_vector)){
DT::datatable(catalogo_vectores_DWH_catalogoatributos[,input$show_varsdwh3, drop=TRUE], filter = list(position = 'top', clear = TRUE), rownames = TRUE, escape = FALSE,
options = list(pageLength = 10,
searching = TRUE,
language = list(
info = 'Atributos contenidos de acuerdo a vectores del DWH.',
paginate = list(previous = 'Volver', `next` = 'Siguiente')
),
initComplete = JS(
"function(settings, json) {",
"$(this.api().table().header()).css({'background-color': '#32475d', 'color': '#fff'});",
"}"),
deferRender=TRUE,
#autoWidth = TRUE,
width="600px",
lengthMenu = c(10,50,100,200),
search = list(regex = TRUE, caseInsensitive = TRUE),
selection = "none"
))
} else {
DT::datatable(catalogo_vectores_DWH_catalogoatributos[,input$show_varsdwh3, drop=TRUE][catalogo_vectores_DWH_catalogoatributos$Cod_Vector %in% input$cod_vector, ],
filter = list(position = 'top', clear = TRUE), rownames = TRUE, escape = FALSE,
options = list(pageLength = 10,
searching = TRUE,
language = list(
info = 'Atributos contenidos de acuerdo a vectores del DWH.',
paginate = list(previous = 'Volver', `next` = 'Siguiente')
),
initComplete = JS(
"function(settings, json) {",
"$(this.api().table().header()).css({'background-color': '#32475d', 'color': '#fff'});",
"}"),
deferRender=TRUE,
autoWidth = TRUE,
width="600px",
lengthMenu = c(10,50,100,200),
search = list(regex = TRUE, caseInsensitive = TRUE),
selection = "none"
)) # , style = 'bootstrap', class = 'table-striped table-hover') # Formato anterior de las tablas
}
})
The problem is, having had the first navbarPage do the work properly (and continue to), the next navbarPage does filter the next tab, but does not bring me directly to it, I have to manually click on the tab to be able to see the filtered data:
I have tried adding the function to parse through the tab name values, present in this closed question: Go to a different Page in shiny by Clicking on the link on an image
var customHref = function(tabName) {
var dropdownList = document.getElementsByTagName( class="value">"a");
for (var i = 0; i < dropdownList.length; i++) {
var link = dropdownList[i];
if(link.getAttribute("data-value") == tabName) {
link.click();
}
window.scrollTo(0, 0);
}
};
but I cant seem to find a way to integrate both the HTML link embedded in my dataframe with this iterator, in a successful manner. Can anyone please orient me as to how I can do this, as I would have to later add a button that would undo the filtering and bring the table back to its original position, and am having trouble incorporating the reactive element to a table that is generated by an if event.
Thanks,