Tablas en pestañas

Un usuario preguntó 👇

Estoy usando atajos para mostrar tablas en pestañas Divi. La primera pestaña carga una tabla en el teléfono en modo de respuesta, pero cuando abro otras pestañas, todas las tablas se cargan como versiones de escritorio.

(@olesolo)

Hace 2 años, 7 meses

Descubrí que una función de respuesta no funciona para que se muestre una tabla de datos: ninguna;

(@supsysticcom)

Hace 2 años, 7 meses

Hola @olesolo

¿Puede darnos un enlace a una página con tablas de datos con pestañas? Nos ayuda a resolver su problema más rápido. El probable código incorrecto de sus plugins o plugins, que utiliza para crear pestañas, generó esta pregunta. Debe desactivar todos sus plugins uno por uno y verificar el problema. Por lo tanto, descubrirá qué plugin está causando el error. Si eso no ayuda, intente cambiar temporalmente a un tema estándar de WordPress.

(@olesolo)

Hace 2 años, 7 meses

Aquí está el conexión. Las pestañas están en la parte inferior de la página. Intente abrir la segunda pestaña en un teléfono móvil.

(@supsysticcom)

Hace 2 años, 7 meses

Hola, @olesolo Para mostrar correctamente la tabla de datos en la pestaña, debes usar la función de Tablas de datos con el plugin Supsystic para actualizar la tabla después de abrir la pestaña. A continuación, se muestra un ejemplo de un código personalizado para usar tablas de datos en pestañas:

<ul id="tabsList">
 <li><a href="#tabItemContent_1" class="tabItem">Tab 1</a></li>
 <li><a href="#tabItemContent_2" class="tabItem" data-table_id="1">Tab 2</a></li>
 <li><a href="#tabItemContent_3" class="tabItem">Tab 3</a></li>
</ul>
<div id="tabItemContent_1">Some data</div>
<div id="tabItemContent_2">[supsystic-tables id=1]</div>
<div id="tabItemContent_3">Some data</div>
jQuery(document).ready(function() {
 var tabSection = jQuery('#tabsList');
 var app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false;
 // Check are Data Tables by Supsystic plugin API and tabs section exist on page
 if(tabSection.length && app) {
  // Find all tabs
  tabSection.find('.tabItem').each(function() {
   // Get table id
   var tableId = jQuery(this).data('table_id');
   // Check, is this tab contains table or not
   if(tableId) {
    jQuery(this).on('click', function() {
     // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
     if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
      app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
     }

    });
   }
  });
 }
});

Pruébelo y háganos saber los resultados.

(@olesolo)

Hace 2 años, 7 meses

no funciona 🙁

(@olesolo)

Hace 2 años, 7 meses

Probé este código con un enlace directo a tablId

jQuery(document).ready(function() {

 //jQuery('.et_pb_tab_1').attr('data-table_id', '1');
 var tabSection = jQuery('.et_pb_tabs_controls');
 var app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false;
 
 // Check are Data Tables by Supsystic plugin API and tabs section exist on page
 if(tabSection.length && app) {
  // Find all tabs
  tabSection.find('.et_pb_tab_1').each(function() {
   // Get table id
   var tableId = 1;
   // Check, is this tab contains table or not
    jQuery(this).on('click', function() {
     // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
     if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
      app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
     }
   });
  });
 }
});

(@supsysticcom)

Hace 2 años, 7 meses

Hola @olesolo

¿Puede especificar qué es exactamente lo que no funciona: la tabla de la pestaña aún no responde o siempre que el código no funcione para usted?

(@olesolo)

Hace 2 años, 7 meses

la tabla de la pestaña aún no responde.

(@supsysticcom)

Hace 2 años, 7 meses

Por favor escríbanos a través de apoyo interno y le proporcionaremos un arreglo.

(@olesolo)

Hace 2 años, 6 meses

Sigo sin poder solucionar este problema. No puedo agregar atributos de identificación a mis pestañas. ¿Podría agregar un código simple para «Ejecutar secuencia de comandos JS después de cargar la tabla» para volver a cargar la tabla?

(@supsysticcom)

Hace 2 años, 6 meses

Hola @olesolo

Ya hemos mejorado el código requerido para mostrar la tabla de datos correctamente en pestañas y agregamos una configuración de código de plugin. Aquí está el enlace a una guía: https://supsystic.com/documentation/table-in-hidden-tab/

Si aún tiene problemas con él, escríbanos a través de apoyo interno e intentaremos que funcione especialmente para usted.

(@olesolo)

Hace 2 años, 6 meses

Mi solución rápida es cambiar la clase de la tabla al hacer clic si el ancho de la ventana es pequeño.

if (jQuery(window).width() < 480) {
            jQuery('div.et_pb_tab table').attr('class','supsystic-table border stripe hover order-column lightboxImg no-border  dataTable no-footer oneColumn oneColumnWithLabels');
          }

¿Solucionó tu problema??

SíNo

0 / 0