使用Bootstrap设置Angular-Datatable的样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>

<table id="myTable" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

$(document).ready(function() {
  $('#myTable').DataTable({
    // 设置语言选项，可根据需要修改
    language: {
      url: '//cdn.datatables.net/plug-ins/1.11.4/i18n/Chinese.json'
    },
    // 设置是否显示搜索框
    searching: true,
    // 设置是否显示每页显示条数选择框
    lengthChange: true,
    // 更多选项...
  });
});