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 ?

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 ?

• javascript
• datatables

• 5 DataTables requires jQuery. If you want to use something like that without jQuery, rewrite it or find a different library. – Ouroborus Commented Jun 19, 2022 at 10:48
• 6 ...such as github./fiduswriter/Simple-DataTables – bloodyKnuckles Commented Jun 19, 2022 at 10:48

3 Answers 3

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/manual/index
The CSS files generated with the Datatables bundler: https://datatables/download/
Use npm install --save datatables-bs4 and npm install --save datatables-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-dt';
    // DataTables CSS
    import 'datatables-bs4/css/dataTables.bootstrap4.css';
    import 'datatables-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.

Converting a ment suggesting simple-datatables to an answer:

new window.simpleDatatables.DataTable("#demo-table");

<script src="https://cdn.jsdelivr/npm/[email protected]"></script>
<table id="demo-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Ext.</th>
      <th>City</th>
      <th data-type="date" data-format="YYYY/DD/MM">Start Date</th>
      <th>Completion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Unity Pugh</td>
      <td>9958</td>
      <td>Curicó</td>
      <td>2005/02/11</td>
      <td>37%</td>
    </tr>
    <tr>
      <td>Theodore Duran</td>
      <td>8971</td>
      <td>Dhanbad</td>
      <td>1999/04/07</td>
      <td>97%</td>
    </tr>
    <tr>
      <td>Kylie Bishop</td>
      <td>3147</td>
      <td>Norman</td>
      <td>2005/09/08</td>
      <td>63%</td>
    </tr>
  </tbody>
</table>

The code above is excerpted from simple-datatables' CDN example.

You can test this library. However, it only works with a fetch API. https://github./avalynx/avalynx-datatable

new AvalynxDataTable("avalynx-datatable", {
    apiUrl: "php/result.php",
    perPage: 10,
    search: "",
    sorting: {
        "name": "asc",
        "age": "desc"
    }
}