jQuery Datatable列搜索

Question

jQuery Datatable列搜索

3

我正在使用jQuery Datatable，并使用其列搜索功能。

我已成功添加了它在标题中，但它是在 thead 标题之后，我需要它在 thead 标题之前，通过使用表格 eq(0)，我能够将其放置在标题之前，但排序也会跟随它。

$('#myApprovalTable thead tr').clone(true).appendTo('#myApprovalTable thead');

$('#myApprovalTable thead tr:eq(1) th').each(function(i) {
  var title = $(this).text();
  //$(this).html('<input type="text" placeholder="Search" />');
  if (title == 'Actions') {
    $(this).hide();
  }
  $(this).html('<input type="text" placeholder="' + title + '" />');

  $('input', this).on('keyup change', function() {
    if (myApproval.column(i).search() !== this.value) {
      myApproval
        .column(i)
        .search(this.value)
        .draw();
    }
  });
});
var myApproval = $('#myApprovalTable').DataTable({
  orderCellsTop: true,
  dom: 'Bfrtip',
  buttons: [{
    text: 'Reset Filter',
    action: function(e, dt, node, config) {
      $('#myApprovalTable input').val('').change();

    }
  }],
  language: {
    search: "_INPUT_",
    searchPlaceholder: "Search..."
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myApprovalTable" class="display table-responsive" style="width:100%">
  <thead>
    <tr>
      <th>title1</th>
      <th>title2</th>
      <th>title3</th>
      <th>title4</th>
      <th>title5</th>
      <th>title6</th>
      <th>title7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

- Arjun Mandloi

4

请在这里添加你的代码。 - Ajay Kumar Oad

@AjayKumar 在上面添加了我的 js 代码。 - Arjun Mandloi

html as well. please. - Ajay Kumar Oad

添加了HTML，您可以使用最新的jQuery和Datatable CDN链接。 - Arjun Mandloi

@AjayKumar，我还需要在第一行中添加列搜索输入框。 - Arjun Mandloi

请检查这个 JSfiddle。它是否正确，还要检查排序是否正确。 - Ajay Kumar Oad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Baijens · Accepted Answer

将您的jQuery选择器更改为选择第一行就可以解决问题。

从 $('#myApprovalTable thead tr:eq(1) th')

到 $('#myApprovalTable thead tr:eq(0) th')

编辑：

为了确保排序按预期工作，我做了以下几点：

- 我交换了您代码的顺序。首先初始化Datatable，然后再添加搜索逻辑。 - 我还删除了clone方法的true参数，以防止克隆Datatable的事件处理程序。 - 最后，我使用prependTo而不是appendTo()将克隆的元素放在前面，这样克隆的表标题就会被更改，而不是原始表标题。

var myApproval = $('#myApprovalTable').DataTable({
  orderCellsTop: true,
  dom: 'Bfrtip',
  buttons: [{
    text: 'Reset Filter',
    action: function(e, dt, node, config) {
      $('#myApprovalTable input').val('').change();

    }
  }],
  language: {
    search: "_INPUT_",
    searchPlaceholder: "Search..."
  }
});

$('#myApprovalTable thead tr').clone().prependTo('#myApprovalTable thead');

$('#myApprovalTable thead tr:eq(0) th').each(function(i) {
  var title = $(this).text();
  //$(this).html('<input type="text" placeholder="Search" />');
  if (title == 'Actions') {
    $(this).hide();
  }
  $(this).html('<input type="text" placeholder="' + title + '" />');

  $('input', this).on('keyup change', function() {
    if (myApproval.column(i).search() !== this.value) {
      myApproval
        .column(i)
        .search(this.value)
        .draw();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myApprovalTable" class="display table-responsive" style="width:100%">
  <thead>
    <tr>
      <th>title1</th>
      <th>title2</th>
      <th>title3</th>
      <th>title4</th>
      <th>title5</th>
      <th>title6</th>
      <th>title7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>