I would like to use DataTable. In this regard I have below JavaScript function.
(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);
}
})();
But I am getting error Uncaught (in promise) ReferenceError: DataTable is not defined.
How to use DataTable without jQuery ?
Our website is using Datatables with Svelte.
While Datatables internally depends on jQuery, you load jQuery without needing to use it with the rest of your website. You can also pass a DOM element to Datatables and make it mount on any DOM element.
Here is an example using ECMAScript 6 modules. Understanding of advanced JavaScript loading techniques and package management is needed in order to install Datatables via 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>