Me gustaría usar DataTable . En este sentido, tengo la siguiente función de JavaScript.
(function () { const getOrderInformationData = async (container) => { const response = await mdcRequestData("/product/information-table/go2wire"); if (response && response.data.length > 0) { container.innerHTML = mdcProcessData(response.data, "orderDataTemplate"); new DataTable("#order_information"); } else { container.innerHTML = '<div class="alert alert-danger" role="alert">No product information was found.</div>'; } }; const orderDataContainer = document.getElementById("order_information"); if (orderDataContainer) { getOrderInformationData(orderDataContainer); } })(); Pero recibo un error Uncaught (in promise) ReferenceError: DataTable is not defined .
¿Cómo usar DataTable sin jQuery?
Nuestro sitio web utiliza tablas de datos con Svelte .
Si bien Datatables depende internamente de jQuery, carga jQuery sin necesidad de usarlo con el resto de su sitio web. También puede pasar un elemento DOM a Datatables y hacer que se monte en cualquier elemento DOM.
Aquí hay un ejemplo usando módulos ECMAScript 6. Es necesario comprender las técnicas avanzadas de carga de JavaScript y la gestión de paquetes para instalar Datatables a través de NPM.
<script lang="ts"> /* Render dynamic tables using server-side sorting and filtering using DataTables library. While the DataTables is settings up itself, server a skeleton loader. https://datatables.net/manual/index The CSS files generated with the Datatables bundler: https://datatables.net/download/ npm install --save datatables.net-bs4 npm install --save datatables.net-responsive-bs4 */ // https://svelte.dev/repl/a4684fe5be9a4c63963bb128c4adf056?version=3.23.2 import { browser } from '$app/env'; import { onMount } from 'svelte'; import jQuery from 'jquery'; import datatableModule from 'datatables.net-dt'; // DataTables CSS import 'datatables.net-bs4/css/dataTables.bootstrap4.css'; import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.css'; // Is DataTables initialised let loaded = false; let el; // table element let table; // table object (API) let extraClass = clickableRows ? 'clickable' : ''; onMount(async () => { if (browser) { const DataTable = datatableModule(); let _options = options || {}; _options['columns'] = columns; let table = new DataTable(el, _options); table.draw(); console.log('DataTable loaded'); } }); </script> <div class="datatables-wrapper"> <div class="table-responsive"> <table bind:this={el} class={'table table-datatable ' + extraClass} style={loaded ? 'display: table; width: 100%;' : 'display: none'} data-cy={dataCy || 'exchange-table'} > <thead> <tr> {#each columns as column} <th>{column.name}</th> {/each} </tr> </thead> <tbody /> </table> </div> <div class="data-tables-skeleton" style={!loaded ? 'display: block' : 'display: none'}> <Skeleton layout="full" /> </div> </div>