responsiveDataTableWithBootStrap5Issues

HTML

<!DOCTYPE html>
<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
      
      <link href="https://cdn.datatables.net/v/bs5/dt-2.1.6/r-3.0.3/datatables.min.css" rel="stylesheet">
 
      <script src="https://cdn.datatables.net/v/bs5/dt-2.1.6/r-3.0.3/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <button class="btn btn-primary" onClick="drawAllTables()">draw all tables</button>
    <div class="container" style="max-width=5px !important;">
     
      <p>Description:</p>
      
        <div class="row">
          <div class="col-12">
              <table id="example" class="table table-responsive datatable table-bordered" style="width: 100%;">
                  <thead>
                      <tr>
                          <th>Name</th>
                          <th>Position</th>
                          <th>Office</th>
                          <th>Age</th>
                          <th>Start Date</th>
                          <th>Salary</th>
                      </tr>
                  </thead>
              </table>
          </div>
      </div>      
    </div>
    
    <hr class="dashed">
    
  </body>
</html>

JavaScript

$(document).ready(function() {
  // Initialize DataTable without any data
  var table = $('#example').DataTable({
    data: [],
    processing: true,
    columns: [
      { title: "Name" },
      { title: "Position" },
      { title: "Office" },
      { title: "Age" },
      { title: "Start date" },
      { title: "Salary" }
    ],
    language: {
      loadingRecords: "Loading data, please wait...", // Loading message
      emptyTable: "No data available in the table ",   // Message when no data is available
      processing: "Processing..."  // This appears when processing is true
    }
  });
	table.processing(true);
  // Manually display loading message
  //$('#example tbody').html('<tr><td colspan="6">Loading data, please wait...</td></tr>');

  // Simulate data fetch
  setTimeout(function() {
    // Example fetched data
    var data = [
      ['John Doe', 'Developer', 'New York', '25', '2019/12/12', '$120,000'],
      ['Jane Smith', 'Manager', 'San Francisco', '32', '2017/06/23', '$150,000'],
      // more data rows...
    ];

    // Clear existing rows and add new data
    table.clear();
    table.rows.add(data).draw();
    table.processing(false);
  }, 3000);
});