How to use DataTable without jQuery

Question

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 ?

Answer 1

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.

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/
Use npm install --save datatables.net-bs4 and npm install --save datatables.net-responsive-bs4

<script lang="ts">
// 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; // table element, 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>

HTML markup

<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>

See full source code.