Pregunta sobre TablePress de Wordpress:

Utilice casillas de verificación para filtrar una tabla

Un usuario preguntó 👇

Hola Tobías,

gracias por ese gran plugin. También me encantan las extensiones.

Mi objetivo es crear una tabla que me permita filtrar una columna usando casillas de verificación. Estaba pensando en archivar ese objeto usando su extensión «Filtrado de filas». Mi idea es analizar los valores de la casilla de verificación en el parámetro «filtro». Desafortunadamente, mis habilidades de TI no son lo suficientemente buenas en este momento. ¿Es eso siquiera posible? Y si es así, ¿podrías ayudarme aquí, por favor?

Ese ejemplo muestra lo que quiero tener. Están marcadas las características 1 y 5. Solo quiero mostrar las filas que contienen las empresas 1 y 3.

[x] Característica 1 [] Característica 2 | [] Característica 3 | [] Característica 4 | [x] Característica 5
Empresa | Característica
Empresa 1 Característica 1, Característica 4, Característica 5 Empresa 2 Característica 1, Característica 2, Característica 5, Característica 4 Empresa 3 Característica 1, Característica 5,

Muchas gracias por tu esfuerzo. Saludos cordiales Niklas

Este tema fue modificado hace 2 años, 8 meses por. Este tema fue modificado hace 2 años, 8 meses por.

(@tobiasbg)

Hace 2 años, 8 meses

Hola,

gracias por tu publicación y perdón por las molestias.

Desafortunadamente, no conozco una solución para esto. El uso de la extensión de filtro de fila aquí no funcionará realmente, como lo hace en el lado del servidor. Necesitará un filtrado del lado del cliente, p. Ej. usando las funciones de API de la biblioteca JS DataTables de https://www.datatables.net/

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias, Gracias por tu respuesta. ¡Eso realmente me ayudó! Ahora tengo el código que me proporciona la funcionalidad para resolver el problema. Desafortunadamente, tengo otro problema en este momento. No puedo entender cómo integrar esto con la mesa.

¿Podrías ayudarme aquí, por favor?

$(document).ready( function () {
  var table = $('#example').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );

Viele Grüße nach Magdeburg Niklas

Esta respuesta fue modificada hace 2 años, 8 meses por.

(@tobiasbg)

Hace 2 años, 8 meses

Hola Niklas,

bonito, se ve bien!

En lugar de usar '#example' como selector, necesitará algo como '#tablepress-123' allí (con 123 como ID de la tabla, solo verifique la fuente de la página).

Además, recomiendo desactivar la casilla de verificación «Usar tablas de datos» en la pantalla «Editar» de la tabla para evitar manipulaciones. Entonces tendrá total flexibilidad para cargar y usar DataTables.

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias,

que tienes tanto para la ayuda rápida.

Esto es lo que ya hice. Cambié el selector a ‘# tablepress-2’ y pegué el código en el campo «Comandos personalizados». Después de eso, creé una nueva página, agregué las casillas de verificación y el acceso directo a la tabla.

Aquí está el contenido de la página:

<input type="checkbox" name="1">Feature 1         
<input type="checkbox" name="2">Feature 2    
<input type="checkbox" name="3">Feature 3    
<input type="checkbox" name="4">Feature 4    

[table id=2 /]

Pero de alguna manera no funciona. ¿Hay algo que me haya perdido? 🙁
En live.datatables funciona perfectamente.

Saludos, Niklas

Esta respuesta fue modificada hace 2 años, 8 meses por. Esta respuesta fue modificada hace 2 años, 8 meses por. Esta respuesta fue modificada hace 2 años, 8 meses por.

(@tobiasbg)

Hace 2 años, 8 meses

Hola,

Entonces, ¿puede publicar un enlace a la página con la tabla donde ocurre este problema, para que pueda mirar? ¡Gracias!

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias,

http://brownsbest.de/table-test/

Ese es el enlace del sitio. ¡Muchas gracias!

Saludos cordiales, Niklas

(@tobiasbg)

Hace 2 años, 8 meses

Hola Niklas,

¡Gracias por el enlace! Parece que ingresó este código en el campo de texto «Comandos personalizados» en la pantalla «Editar» de la tabla. Esto no funcionará. Deberá ponerlo en su propio HTML <script> etiqueta.

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Buenos días Tobías,

¡gracias de nuevo!

Ok, eliminé el js del campo de texto «Comandos personalizados» y puse el javascript en el campo de texto del sitio de wordpress.

De alguna manera, todavía no funciona. ¿Es la última forma de ponerlo en la «etiqueta HTML»?

El contenido del sitio es:

<script type="text/javascript">
$(document).ready( function () {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Saludos cordiales, Niklas

Esta respuesta fue modificada hace 2 años, 8 meses por. Esta respuesta fue modificada hace 2 años, 8 meses por. Esta respuesta fue modificada hace 2 años, 8 meses por.

(@tobiasbg)

Hace 2 años, 8 meses

Hola Niklas,

aquí, es importante no tener saltos de línea en el JS, ya que WordPress agrega etiquetas HTML de lo contrario. Además, debe cargar la biblioteca JS DataTables.

Por lo tanto: 1) Desmarque la casilla de verificación «Usar tablas de datos» en la pantalla «Editar» de la tabla. 2) Vuelve a intentarlo:


<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias,

¡Muchas gracias! Está funcionando ahora !!

Una última cosa realmente:

Ahora estoy tratando de agregar la configuración anterior de tablepress de tablas de datos. No puedo averiguar cómo y dónde agregarlo en el html jtascript en línea. Este debería ser el código:

$('#tablepress-3').dataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Todo lo mejor para Niklas

(@tobiasbg)

Hace 2 años, 8 meses

Hola,

estos deben entrar en la línea

var table = $('#tablepress-2').DataTable();

de su código, .i

var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias,

muchas gracias por su ayuda. Ahora pongo el código en la línea. El formato es correcto pero el filtrado de casillas de verificación ya no funciona.

<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

(@tobiasbg)

Hace 2 años, 8 meses

Hola,

ah, tenemos que eliminar la parte del idioma, ya que esta ya no está cargada. Quitar el "language":DataTables_language["de_DE"], parte.

Saludos, Tobias

(@nklsbrn)

Hace 2 años, 8 meses

Hola Tobias,

la parte del idioma se elimina pero permanece igual. El filtrado no funciona

<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

Sobre Niklas

(@tobiasbg)

Hace 2 años, 8 meses

Hola,

ah, desactivamos la búsqueda … Quitar también
,"searching":false
Saludos, Tobias

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *