Quiero cargar el archivo table.html , que contiene una tabla con clases de arranque, en la página de índice. El problema es que no coge estilo después de cargar la tabla. ¿Cuál es la razón? Si importo bibliotecas de arranque en el archivo table.html , mi problema se resolverá, pero esta solución no es adecuada porque para cada llamada de biblioteca de arranque que se carga, quiero importar las bibliotecas deseadas solo una vez en la página de índice, y cada vez mis tablas se cargan en él.
aquí está mi código: (también puedes ver https://github.com/yarandish/Challanges )
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var cache = null; </script> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.rtl.min.css"> <link rel="stylesheet" href="lib/table/bootstrapTable/css/bootstrap-table.min.css"> <script src="lib/jquery/jquery-3.6.0.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="lib/table/bootstrapTable/js/bootstrap-table.min.js"></script> </head> <body> <input type="text" id="name"> <input type="text" id="price"> <input type="text" id="age"> <button onclick="cache = $('body'); $('body').load('table.html');">load table</button> </body> </html>tabla.html:
<table id="table" data-toggle="table" data-url="data.json" data-buttons-class="outline-secondary" data-classes="table table-striped table-hover table-bordered" data-toolbar=".toolbar" data-maintain-meta-data="true" tabindex="-1" data-click-to-select="true" data-multiple-select-row="true" > <thead> <tr> <th data-checkbox="true"></th> <th data-field="name">name</th> <th data-field="price">price</th> <th data-field="day">day</th> </tr> </thead> </table>Debido al uso generalizado de tablas en widgets de terceros, como calendarios y selectores de fechas, hemos diseñado nuestras tablas para que sean opcionales. Simplemente agregue la clase base .table a cualquier , luego amplíe con estilos personalizados o nuestras diversas clases de modificadores incluidas. árbitro
Entonces necesita manualmente esas clases para el marcado HTML:
table al elemento de tablacol class a cada elemento td/throw a cada elemento tr.Demostración de trabajo en repetición
Debe volver a ejecutar los scripts cuando agregue nuevos contenidos. Simplemente agregue el siguiente código al final de table.html:
<script> $('[data-toggle="table"]').bootstrapTable(); </script> Aquí está la demostración de trabajo en codepen.
Si no desea apuntar a todas las tablas, también puede usar:
$('#table').bootstrapTable();