Bootstrap data table styles not applied in wordpress?

Estoy tratando de utilizar Bootstrap Datatables (https://datatables.net/manual/installation) en una página de wordpress que "inyecto" con add_shortcode(), pero parece bastante malo: Las primeras 2 líneas son los recolectores de fecha, pero luego las entradas seleccionan caja, la barra de búsqueda y la paginación en la parte inferior mira fuera de lugar... Ya importaba la hoja de estilo y los scripts con

wp_register_script( 'datatablejs', 'http://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js');
wp_register_style('datatables_styles', 'http://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css');

wp_enqueue_script('datatables_styles');
wp_enqueue_script('datatablejs');

pero no sé cómo arreglar los estilos para que parezca "normal"... También estoy usando estilos bootstrap 4, tal vez que interfiere con los estilos de los datatables? He creado mi tabla dentro de un archivo de php para wordpress...

function renderTable() {
global $finishedData;

$table ="";
$table .= '

            

                 
                

                ';
                    $count = 0;
                    foreach($finishedData as $entry) {
                        $ID = ++$count;
                        $ID=$entry["ID"];
                        $BID=$entry["BID"];
                        $MOD=$entry["MOD"];
                        $Datum=$entry["Datum"]; 

                        $table .=   "";
                        $table .=    "";
                        $table .= "";
                        $table .= "";
                        $table .= "";
            
                    } 
$table .=           '

                    
                        

                            #
                            AID
                            BID
                            OID
                            Mod
                            Datum      
                        

                    
                    
" .  $ID . "" .  $AID . "" . $BID . "" . $MOD ."". strftime("%d.%m.%Y",strtotime($Datum)) ."

                    
     
                

            

        
';

return $table;

}

enter image description here

Pregunta hecha hace 3 años, 4 meses, 29 días - Por cyberjedi

3 Respuestas:

  • Asegúrese de que los estilos y los archivos JS están realmente cargados mediante la comprobación de las herramientas de desarrollador (inspección) y que no hay errores en la consola y comprobar si otros estilos tal vez sobreescribir los estilos de tablas de datos, también trate de agregar los enlaces al encabezado utilizando este plugin https://wordpress.org/plugins/insert-headers-and-footers/

    Respondida el Dec 16, 2020 a las 11:42 - por scriptsorcerer4f7e

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con los estilos de Bootstrap Datatables en tu página de WordPress puede estar relacionado con la forma en que estás incluyendo los scripts y estilos, así como con la interacción entre los estilos de Bootstrap 4 y los estilos de Datatables.

    Aquí tienes algunas recomendaciones para intentar solucionar el problema:

    • Asegúrate de cargar los scripts y estilos correctamente: Verifica que estás registrando y encolando los scripts y estilos de Datatables de manera correcta en WordPress. Asegúrate de que estás utilizando las URLs correctas de los archivos y de que estás cargando primero jQuery antes de cargar el script de Datatables.
    • Revisa la estructura de tu HTML: En tu función `renderTable()`, asegúrate de que la tabla esté correctamente estructurada siguiendo las clases de Bootstrap. Por ejemplo, en lugar de ``, utiliza `
      `.
      • Evita conflictos de estilos entre Bootstrap y Datatables: Es posible que los estilos de Bootstrap 4 estén interfiriendo con los estilos de Datatables. Puedes intentar desactivar temporalmente los estilos de Bootstrap en la tabla o personalizar los estilos de Datatables para que se integren mejor con Bootstrap.
      • Establece la clase correcta para la tabla: En Datatables, en lugar de `table-striped dark`, utiliza `stripe` para las filas alternas y puedes personalizar los estilos en tu hoja de estilos CSS para adaptarlos a tus necesidades.
      • Utiliza la función `wp_enqueue_scripts()`: En lugar de encolar los scripts y estilos directamente en una función, considera hacerlo dentro de la función `wp_enqueue_scripts()` del archivo `functions.php` de tu tema de WordPress para asegurarte de que se carguen correctamente en todas las páginas.

      Siguiendo estos pasos, deberías poder resolver el problema con los estilos de Bootstrap Datatables en tu página de WordPress.

      Respondida el Dec 17, 2020 a las 11:41 - por Gpt

      Votos positivos: 0 | Votos negativos: 0

    • Resolución de estilos de Bootstrap DataTables en WordPress

      1. Asegúrate de que los estilos y scripts se están incluyendo correctamente:

      Verifica que las rutas a los archivos CSS y JS sean correctas y que los estés encolando con las funciones wp_register_style() y wp_enqueue_style().

      2. Conflictos de estilos:

      Bootstrap 4 y DataTables usan sus propios estilos CSS. Es posible que tengas conflictos de estilo entre ellos. Intenta agregar el siguiente código a tu archivo CSS para anular los estilos de DataTables:

      css
table.dataTable {
    border-collapse: collapse !important;
}

table.dataTable th, table.dataTable td {
    border: 1px solid 
      ddd !important;
      }

      3. Inicialización de DataTables:

      Asegúrate de inicializar DataTables después de que se cargue la página. Puedes hacerlo mediante el uso de un disparador jQuery:

      javascript
jQuery(document).ready(function() {
    $('pruefungentable').DataTable();});

      4. Verifica la versión de jQuery:

      Bootstrap DataTables requiere jQuery 1.7 o superior. Verifica que estás usando la versión correcta de jQuery.

      5. Depuración adicional:

      Usa la herramienta de inspección del navegador (por ejemplo, Chrome DevTools) para verificar si los archivos CSS y JS se están cargando correctamente. Comprueba si hay errores en la consola del navegador que puedan indicar un problema con la inicialización de DataTables. Elimina temporalmente otros estilos y scripts que puedan estar interfiriendo con DataTables.

      Código actualizado:*

      Intenta utilizar el siguiente código actualizado en tu archivo de plantilla de WordPress:

      php
function renderTable() {
    global $finishedData;

    $table = '';
    $table .= '
      • '; $count = 0; foreach ($finishedData as $entry) { $ID = ++$count; $AID = $entry["AID"]; $BID = $entry["BID"]; $MOD = $entry["MOD"]; $Datum = $entry["Datum"]; $table .= ""; $table .= ""; $table .= ""; $table .= ""; $table .= ""; } $table .= '
      		 AID BID OID Mod Datum
      " . $ID . "" . $AID . "" . $BID . "" . $MOD . "" . strftime("%d.%m.%Y", strtotime($Datum)) . "
'; return $table; } // Encola los estilos y scripts de DataTables function enqueue_dataTables_scripts() { wp_register_style('datatables_styles', 'http://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css'); wp_register_script('datatablejs', 'http://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js'); wp_enqueue_style('datatables_styles'); wp_enqueue_script('datatablejs'); } add_action('wp_enqueue_scripts', 'enqueue_dataTables_scripts'); // Inicializa DataTables function initialize_dataTables() { echo ""; } add_action('wp_footer', 'initialize_dataTables');

Respondida el Dec 17, 2020 a las 11:55 - por Gemini

Votos positivos: 0 | Votos negativos: 0