如何为DataTables添加自定义搜索框并启用searchHighlight功能

1. 修正核心配置错误 #

原代码存在几个无效配置和逻辑问题，先逐一修正：

• 替换无效配置showNEntries为bLengthChange: false，用于隐藏每页条数选择器
• 添加dom: 't'配置，只保留表格主体，隐藏默认的搜索框、分页栏等控件
• 使用DataTable()（大写D）初始化表格，直接获取API对象，避免后续调用方法时报错
• searchHighlight功能依赖第三方库mark.js，必须引入才能生效

2. 修复自定义搜索逻辑 #

原keyup事件仅调用draw()，未传递搜索关键词，需通过DataTables的search()方法设置搜索值后再执行绘制。

完整修正代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <!-- 引入mark.js实现搜索高亮 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>
<body>
  <div class="container">
    <label for="seachBox">Buscar:</label>
    <input style="margin: 10px;" id='seachBox' placeholder="Buscar">
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$4,800</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

JS代码 #

// 初始化表格并获取API对象
var table = $("#example").DataTable({
  "bPaginate": false,
  "bLengthChange": false,
  "bInfo": false,
  "language": {
    "zeroRecords": "No se encontraron rutas"
  },
  "searchHighlight": true,
  "dom": 't' // 仅显示表格，隐藏默认控件
});

// 绑定自定义搜索框事件
$("#seachBox").keyup(function() {
  // 设置搜索关键词并重新绘制表格
  table.search($(this).val()).draw();
});

关键说明 #

• 隐藏默认搜索：dom: 't'是DataTables布局控制参数，仅保留表格主体，完全隐藏默认的搜索、分页等元素。若需保留其他控件，可调整为'ft'（过滤栏+表格）等组合，但本场景用自定义搜索，故只留t。
• 搜索高亮生效：mark.js是searchHighlight功能的依赖库，未引入则高亮完全失效，必须添加该脚本。
• API对象使用：DataTable()（大写D）返回的是DataTables专属API对象，可直接调用search()、draw()等方法，避免原代码中jQuery对象调用API方法导致的控制台错误。

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