0
194
ViewsCómo usar querySelector en Tabulator JS
Estoy probando TabulatorJS 5.2. para construir tablas.
Estoy enfrentando un problema, no sé por qué existe. pero después de construir la tabla, estoy tratando de consultarla, selecciónela pero no obtiene ningún resultado. si selecciono la tabla principal puedo ver la tabla. ¿Cómo puedo obtener los elementos de la tabla después de construirla?
Aquí estoy tratando de consolar. Registrar la tabla usando la identificación de la tabla
console.log( document.querySelector('#example-table') ) el resultado de la consola: - 
así que aparentemente puedo obtener la consulta de la tabla principal.
también si usé jquery ..
console.log( $('#example-table') ) 
Y puedo enumerar a los niños
Pero si traté de consultar los elementos internos como los encabezados, ¡no obtuve ningún resultado!
console.log( $('.tabulator-header') )Soy nuevo en esto. Entonces, ¿qué me estoy perdiendo aquí?
1 answers
Answer question0
Debe esperar a que se construya la tabla del tabulador antes de intentar consultar sus elementos. Tabulator tiene un evento tableBuilt que puede usar para este propósito para asegurarse de que la tabla esté disponible en el DOM antes de interactuar con ella. Tome el siguiente ejemplo. Primero console.log le dará null . El segundo dentro del evento tableBuilt le dará el resultado que desea.
let tableData = [ {id:1, name:"Billy Bob", age:"12"}, {id:2, name:"Mary May", age:"1"}, ] var table = new Tabulator("#example-table", { data:tableData, //set initial table data columns:[ {title:"Name", field:"name"}, {title:"Age", field:"age"} ] }) console.log(document.querySelector('.tabulator-header')) table.on("tableBuilt", () => { console.log(document.querySelector('.tabulator-header')) }) <link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.7/dist/js/tabulator.min.js"></script> <div id="example-table"></div>