How to use DataTable without jQuery

user_5043301 0
Viewed 257

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 ?

datatables javascript
1 Answers

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>

See full source code.

user_3151680
Related