jquery datatables自定义搜索表单

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>30</td>
      <td>London</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

$(document).ready(function() {
  $('#myTable').DataTable({
    searching: true, // 启用搜索功能
    searchDelay: 500, // 搜索延迟时间，单位为毫秒
    dom: 'lfrtip', // 显示搜索框
    language: {
      search: '自定义搜索:', // 自定义搜索框提示文本
    }
  });
});

<form id="searchForm">
  <input type="text" id="nameInput" placeholder="姓名">
  <input type="text" id="ageInput" placeholder="年龄">
  <input type="text" id="cityInput" placeholder="城市">
  <button type="submit">搜索</button>
</form>

$(document).ready(function() {
  var table = $('#myTable').DataTable({
    searching: true,
    searchDelay: 500,
    dom: 'lfrtip',
    language: {
      search: '自定义搜索:',
    }
  });

  $('#searchForm').on('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var name = $('#nameInput').val();
    var age = $('#ageInput').val();
    var city = $('#cityInput').val();

    table.search(name + ' ' + age + ' ' + city).draw(); // 根据输入的值进行搜索和过滤
  });
});