Question

我正在使用JQuery DataTables并尝试添加滚动条以适应屏幕以及标题中的列搜索。它是打破标题（如果我点击排序，那么我的自定义标题就会消失）并且搜索不起作用（仅当滚动条存在时才会发生）

我的代码（不要因为我动态添加所有数据而更改html）：

var table = $('#example').DataTable({
  "scrollX": true,
});

$('#example thead th').each(function() {
  var title = $(this).text();
  $(this).html('<input type="text" placeholder="' + title + '" />');
});

table.columns().every(function() {
  var that = this;

  $('input', this.header()).on('keyup change', function() {
    if (that.search() !== this.value) {
      that
        .search(this.value)
        .draw();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>g.winters@datatables.net</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>a.cox@datatables.net</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>c.kelly@datatables.net</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>a.satou@datatables.net</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>b.williamson@datatables.net</td>
    </tr>
  </tbody>
</table>

Fiddle

Answer 1

您需要在添加列过滤元素后调用DataTable()，否则DataTables插件会在搜索，排序，更新时修改HTML ...

因此，您可以将输入字段添加到新行，并添加到列标题之前：

＆＃13;

// Create search header
var new_row = $("<tr class='search-header'/>");
$('#example thead th').each(function(i) {
  var title = $(this).text();
  var new_th = $('<th style="' + $(this).attr('style') + '" />');
  $(new_th).append('<input type="text" placeholder="' + title + '" data-index="'+i+'"/>');
  $(new_row).append(new_th);
});
$('#example thead').prepend(new_row);

// Init DataTable
var table = $('#example').DataTable({
  "scrollX": true,
  "searching": true
});

// Filter event handler
$( table.table().container() ).on( 'keyup', 'thead input', function () {
  table
    .column( $(this).data('index') )
    .search( this.value )
    .draw();
});

＆＃13;

.search-header {
    background: #dcdcdc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>g.winters@datatables.net</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>a.cox@datatables.net</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>c.kelly@datatables.net</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>a.satou@datatables.net</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>b.williamson@datatables.net</td>
    </tr>
  </tbody>
</table>

＆＃13;

以下是您的小提琴更新：http://jsfiddle.net/beaver71/1pede2q3/

如果您可以在此处更改HTML页脚，则可以在DataTables文档中提出一个解决方案，在底部显示列搜索文本输入：https://www.datatables.net/release-datatables/examples/api/multi_filter.html

Answer 2

这种情况正在发生，因为jquery数据表不了解您要添加的<input/>字段，因此只要表结构需要更改，就会删除它们。您需要将这些放在表结构之外，或者找到另一种方法来实现该功能。

JQuery Datatables滚动条和列搜索无法正常工作

2 个答案: