为什么搜索没有在jquery-dataTable javascript jquery上工作

Question

我有一个table，其中包含了一个button用于操作，因为该搜索不适用于table。

以下是演示： https://jsfiddle.net/pkxmnh2a/33/

＆＃13;

＆＃13;

$(document).ready(function() {
  var table = $('#examples').DataTable();
  $('a.toggle-vis').on('click', function(e) {
    e.preventDefault();

    var column = table.column($(this).attr('data-column'));
    column.visible(!column.visible());
  });

  $('#examples tfoot th').each(function() {
    var title = $('#examples thead th').eq($(this).index()).text();
    $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
  });
  table.columns().eq(0).each(function(colIdx) {
    $('input', table.column(colIdx).footer()).on('keyup change', function() {
      table
        .column(colIdx)
        .search(this.value)
        .draw();
    });
  });
});

＆＃13;

.widthind {
  width: 30px;
  height: 30px;
  background-color: black;
  color: white;
}

form {
  margin: 0;
  padding: 0;
  display: -webkit-inline-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
  <thead class="thead-dark">

    <tr>
      <th>Id</th>

      <th>Customer Name</th>

      <th>Description</th>
    </tr>

  </thead>

  <tbody>

    <tr>

      <td>2PslfYy</td>

      <td>He-man </td>

      <td>good product 1</td>
    </tr>

    <thead class="thead-dark excludeAction" style="background-color: !important;">
      <tr>

        <th colspan="50">

          <a href="#" class="btn btn-danger">Delete</a>

        </th>

      </tr>

    </thead>

    <tr>

      <td>3lpnSrv</td>

      <td>Jhon Doe</td>

      <td>good product 2</td>
    </tr>

    <thead class="thead-dark excludeAction" style="background-color: !important;">
      <tr>

        <th colspan="50">

          <a href="#" class="btn btn-danger">Delete</a>

        </th>

      </tr>

    </thead>

  </tbody>
  <tfoot>
    <tr>
      <th>Id</th>

      <th>Customer Name</th>

      <th>Description</th>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是你要在表格的行中标题thead标签。这不符合规范，也不适用于Datatables。加上Datatables不支持tbody（行）中的colspan或rowspan。

修复按钮后，由于此行上的选择器，搜索仍然无法正常工作： $('input', table.column(colIdx).footer()).on('keyup change', function () {

这也影响了全球搜索。将您的代码与此示例进行比较： https://datatables.net/examples/api/multi_filter.html

凯文

Answer 2

thead永远不会进入体内。

选中jsfiddle.net/nfycu6o5/1。

更正html表：

<table class="table table-boardered" id="examples">
<thead class="thead-dark">
    <tr>
        <th>Id</th>
        <th>Customer Name</th>
        <th>Description</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>2PslfYy</td>
        <td>He-man </td>
        <td>good product 1</td>
        <td><a href="#" class="btn btn-danger">Delete</a></td>
    </tr>
    <tr>
        <td>3lpnSrv</td>
        <td>Jhon Doe</td>
        <td>good product 2</td>
        <td><a href="#" class="btn btn-danger">Delete</a></td>
  </tr>
</tbody>
<tfoot>
    <tr>
        <th>Id</th>
        <th>Customer Name</th>
        <th>Description</th>
        <th></th>
    </tr>
</tfoot>
</table>

Answer 3

您的行正在thead元素内创建，datatable中的搜索将从tbody元素而不是thead

进行搜索

例如：当您在搜索框上键入时，键盘事件将触发并从​​表体中查找结果，并且表头始终保持不变

<table class="table table-boardered" id="examples">
<thead class="thead-dark">
    <tr>
        <th>Id</th>
        <th>Customer Name</th>
        <th>Description</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>2PslfYy</td>
        <td>He-man </td>
        <td>good product 1</td>
        <td><a href="#" class="btn btn-danger">Delete</a></td>
    </tr>
    <tr>
        <td>3lpnSrv</td>
        <td>Jhon Doe</td>
        <td>good product 2</td>
        <td><a href="#" class="btn btn-danger">Delete</a></td>
  </tr>
</tbody>
<tfoot>
    <tr>
        <th>Id</th>
        <th>Customer Name</th>
        <th>Description</th>
        <th></th>
    </tr>
</tfoot>
</table>