如何在Bootstrap 3表格的搜索框旁添加按钮

核心问题分析 #

你按钮未显示的主要原因是缺少DataTables Buttons扩展的依赖文件，且初始化代码未配置按钮相关参数。以下是两种可行的解决方法：

方法1：使用DataTables Buttons扩展官方方案 #

1. 引入必要资源（按顺序） #

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<!-- DataTables Bootstrap适配JS -->
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<!-- DataTables Buttons Bootstrap适配JS -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>

2. 修改初始化代码 #

通过dom参数调整布局，将按钮放置在搜索框旁，同时配置按钮类型（示例为每页条数选择按钮+自定义按钮）：

<table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>No</th>
                <th>Request Type</th>
                <th>Request ID</th>
                <th>Requester</th>
                <th>Traveler Employee</th>
                <th>Pending Approver</th>
                <th>Status</th>
                <th>Status Reason</th>
                <th>Stage</th>
                <th>Request Date</th>
                <th>Due Date</th>
              </tr>
            </thead>
            <tbody>
              <tr>              
                <td>1</td>
                <td>Travel Request</td>
                <td>TR000001</td>
                <td>Matthew Man Young Leemans</td>
                <td>Matthew Man Young Leemans</td>
                <td>Matthew Man Young Leemans</td>
                <td>Initiate Request</td>
                <td>New</td>
                <td>Draft</td>
                <td>20-03-2023</td>
                <td>20-03-2023</td>
              </tr>
            </tbody>
          </table>

<script>
$(document).ready(function () {
  $('#example').DataTable({
    // dom参数控制布局：l-每页条数，f-搜索框，B-按钮，rt-表格内容，ip-分页
    dom: '<"row"<"col-md-6"l><"col-md-6"fB>>rtip',
    buttons: [
      // 每页条数选择按钮
      'pageLength',
      // 自定义按钮
      {
        text: '自定义按钮',
        action: function (e, dt, node, config) {
          alert('自定义按钮被点击了！');
        }
      }
    ]
  });
});
</script>

方法2：手动插入自定义按钮（无需Buttons扩展） #

如果不需要官方按钮功能，只想简单加个按钮到搜索框旁，可以用DOM操作插入：

<table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>No</th>
                <th>Request Type</th>
                <th>Request ID</th>
                <th>Requester</th>
                <th>Traveler Employee</th>
                <th>Pending Approver</th>
                <th>Status</th>
                <th>Status Reason</th>
                <th>Stage</th>
                <th>Request Date</th>
                <th>Due Date</th>
              </tr>
            </thead>
            <tbody>
              <tr>              
                <td>1</td>
                <td>Travel Request</td>
                <td>TR000001</td>
                <td>Matthew Man Young Leemans</td>
                <td>Matthew Man Young Leemans</td>
                <td>Matthew Man Young Leemans</td>
                <td>Initiate Request</td>
                <td>New</td>
                <td>Draft</td>
                <td>20-03-2023</td>
                <td>20-03-2023</td>
              </tr>
            </tbody>
          </table>

<script>
$(document).ready(function () {
  var table = $('#example').DataTable();
  
  // 找到搜索框所在的容器，插入按钮
  var searchContainer = $('.dataTables_filter');
  searchContainer.append('<button class="btn btn-primary ms-2">自定义按钮</button>');
  
  // 给按钮绑定事件
  searchContainer.find('button').click(function(){
    alert('手动插入的按钮被点击了！');
  });
});
</script>

内容的提问来源于stack exchange，提问作者fres