引导程序中的表不显示搜索和按钮答案

【问题标题】：Search and buttons not appear for table in bootstrap引导程序中的表不显示搜索和按钮
【发布时间】：2022-01-11 09:37:30
【问题描述】：

我不知道为什么，但即使没有任何问题，也不会出现搜索和 pdf、打印等按钮。

这是我当前的表：

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

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

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

注意：我注意到 rowspan 使表格出错，但我确实需要该 rowspan。

【问题讨论】：

嗨 Shahir，您的代码中有一个意外的标记同时从表格中删除按钮 div 并移至表格顶部。
我认为您缺少数据表库

标签： html bootstrap-4

【解决方案1】：

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

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

希望对你有帮助..

【讨论】：

【解决方案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>

【讨论】：