jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio.
El widget de tabla Column-Toggle permite ocultar/mostrar columnas menos importantes con la ayuda de un botón Columna con casillas de verificación.
En este artículo, vamos a aprender el método jQuery Mobile Column-Toggle Table refresh(). Este método se usa para actualizar las etiquetas en las celdas.
Sintaxis:
$( ".selector" ).table-columntoggle( "refresh" );
Parámetros: Este método no acepta ningún argumento.
Tipo de devolución: este método actualiza el widget.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo: Este ejemplo describe los usos del método de jQuery Mobile Column-Toggle Table refresh().
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src= "//code.jquery.com/jquery-3.2.1.min.js"> </script> <script src= "//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> </script> </head> <body> <center> <div data-role="page"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>jQuery Mobile Column-Toggle Table refresh Method</h3> <div id="log"></div> <div data-role="header"> </div> <div role="main"> <table data-role="table" id="GFG" data-mode="columntoggle"> <thead> <tr> <th data-priority="1"> Company Name </th> <th data-priority="persist"> Website </th> <th data-priority="2"> Year </th> </tr> </thead> <tbody> <tr> <th>GeeksforGeeks</th> <td><a href="https://www.geeksforgeeks.org/" data-rel="external"> WWW.GeeksforGeeks.org </a> </td> <td>2010</td> </tr> </tbody> </table> <input type="button" id="btn" style="width:250px;" value="Refresh"> </div> </div> </center> <script> $(document).ready(function () { $("#btn").on('click', function () { $("#log").html('Column-Toggle Table widget has been Refresh.'); $("#GFG").table-columntoggle("refresh"); }); }); </script> </body> </html>
Producción:
Referencia: https://api.jquerymobile.com/table-columntoggle/#method-refresh
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA