[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/simple-datatables@1.16.3/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