bootstrap 中的 table 的搜索和按钮未显示

Question

我不知道为什么但是没有出现搜索和像 pdf、打印这样的按钮，尽管没有任何问题。

这是我现在的 table:

No Search and Button Table

这是代码：

<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
  <tr>
    <th>No.</th>
    <th>Trimester</th>
    <th>Role</th>
    <th>Before</th>
    <th>Due Date</th>
    <th>After</th>
    <th>Action</th>
   </tr>
 </thead>
 <tbody>
  <tr>
   <td rowspan="4" class="bg-white">1.</td>
   <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
   <td>Coordinator</td>                                                                                                                                                     
   <td>10/12/2021</td>
   <td>12/12/2021</td>
   <td>13/12/2021</td>
   <td>
   <div class="d-flex">
   <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button></form>
   <a type="submit" class="btn btn-danger btn-xs">Remove</a>
   </div>
   </td>
   </tbody>
</table>

我把这里的一些代码删掉了，因为太长了

这就是我想要实现的：

Table that have search and buttons

这是我的数据table脚本函数：

$(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["excel", "pdf", "print"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
  });

注意：我注意到 rowspan 使 table 错误，但我确实需要那个 rowspan。

Answer 1

您可以尝试使用此代码进行搜索...

<table id="Example" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">

希望对你有所帮助..

Answer 2

我让你喜欢一个非常基本的版本，但我认为这就是你想要的。看看我添加的 HTML 和 CSS。我假设还有更多这样的表。我添加了一个搜索栏和一些潜在的按钮，用于链接到 excel、pdf 或打印。

.container { 
  width: 100%;
  height: 100%;
  background-color: lightblue;
  border: solid;
  overflow: visible;
}

.d-flex {
  display: flex;
  flex-direction: column;
}

.nav-comp {
  list-style-type: none;
  display: flex;
}

li {
  background-color: lightgrey;
  border: solid;
  list-style-type: none;
  width: 100px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
  margin-right: 10px;
}

input[type=search] {
    position: absolute;
    top: 2px;
    right: 5px;
    width: 30%;
    text-align: right;
    border: solid lightgrey;
    border-radius: 10px;
}

table#example1 {
  border-bottom: black solid;
  margin-bottom: 1rem;
}

<head>
   <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<nav>
   <ul class="nav-comp">
      <li>Excel</li>
      <li>PDF</li>
      <li>Print</li>
   </ul>
</nav>
<div class="search-bar">
   <input type="search" placeholder="Search">
</div>
<div class="container">
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">1.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">2.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">3.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">4.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">5.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">6.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">7.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
   <table id="example1" class="table table-bordered table-striped dataTable no-footer">
      <thead>
         <tr>
            <th>No.</th>
            <th>Trimester</th>
            <th>Role</th>
            <th>Before</th>
            <th>Due Date</th>
            <th>After</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4" class="bg-white">8.</td>
            <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
            <td>Coordinator</td>
            <td>10/12/2021</td>
            <td>12/12/2021</td>
            <td>13/12/2021</td>
            <td>
               <div class="d-flex">
                  <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
               </div>
            </td>
      </tbody>
   </table>
</div>

bootstrap 中的 table 的搜索和按钮未显示

Search and buttons not appear for table in bootstrap

html

bootstrap-4