[Feature Request] Documentation Datatable AJAX/fetch Request

[fouille]

What is your enhancement?

hello,

I've suscribe Pro subcription, and I've problem for use simpledatatable with Ajax and Fetch request in Jquery.
Can you help me ?

[groovemen]

Hello @fouille,

Thank you for using our products, here is an example of how to use SimpleDataTable with AJAX and Fetch request in jQuery for the Material Dashboard 2 Pro template:

1. First, you need to include the necessary dependencies in your HTML file. Make sure you have included the jQuery library, the SimpleDataTable library, and the Material Dashboard 2 Pro template CSS and JS files:

<link rel="stylesheet" href="./assets/css/material-dashboard.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js"></script>

2. Next, create a table in your HTML file and add an ID to it. This ID will be used to initialize the SimpleDataTable later:

<table id="my-table" class="table table-striped table-no-bordered table-hover dataTable dtr-inline">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <!-- table data will be loaded dynamically via AJAX -->
  </tbody>
</table>

3. Now, write a jQuery script to initialize the SimpleDataTable and load data from the server via AJAX. Here's an example:

$(document).ready(function() {
  // initialize SimpleDataTable
  var table = new SimpleDataTable("#my-table");

  // load data via AJAX
  fetch("https://your-api-endpoint.com/data")
    .then(response => response.json())
    .then(data => {
      // populate the table with data
      table.rows.load(data);
    })
    .catch(error => {
      console.error(error);
    });
});

Note: Replace "https://your-api-endpoint.com/data" with the actual URL of your server API endpoint.

That's it! You should now have a working SimpleDataTable with AJAX and Fetch request in jQuery for Material Dashboard 2 Pro template.

All the best,
Stefan