搜索带有复选框的列会清除文本字段

Question

我有一个要过滤的包含两列的表。一个输入是复选框和过滤列 (0)，另一个输入是默认输入文本字段和过滤列 (4)。

我在使用复选框时遇到的问题是输入字段被清除了。后端的输入过滤器不受影响（复选框值和原始输入值都被过滤）但文本被删除。

我在这里创建了一个小提琴http://jsfiddle.net/y8t9xmuu/

我也在下面放了一个代码。尝试搜索“office”或“field”，然后使用复选框。您会看到文本输入字段中的文本消失但不会更改过滤器。

$(function() {

  var oTable = $('#tTable').dataTable({
    "autoWidth": false,
    "order": [],
    "lengthChange": false,
    "paginate": false,
    //Initial Column search
    "searchCols": [{"search": "ABC"}, null, null, null, null, null], 
    "columnDefs": [{
        "orderable": false,
        "targets": [0, 1, 2, 3, 4]
      }, //Diasble sorting on certain columns
    ]
  });


  //Default Search
  $('.dataTables_filter input')
    .off()
    .on('keyup input', function(e) {
      oTable.api().column(4).search(this.value, false, true).draw();
    });

  //Checkboxes
  $('.options input:checkbox').change(function() {

    if (this.checked)
      oTable.api().column(0).search('ABC|XYZ', true, false).draw();
    else
      oTable.api().column(0).search('ABC', true, false).draw();

  });
});

.tTableWrap {
  display: inline-block;
  width:500px;
  font-size:11px;
}
.tHeader {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
.options {
  height: 35px;
  border-bottom: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />



<div class="tTableWrap">
  <div class="tHeader">Header</div>
  <div class="tMain">
    <div class="options">
      <div class="input">
        <input type="checkbox" id="sListCheck" class="listCheck" />
        <label for="sListCheck" unselectable="on">Include XYZ</label>
      </div>
    </div>
    <table id="tTable">
      <thead>
        <tr>
          <th>TYPE</th>
          <th>NAME</th>
          <th>NUMBER</th>
          <th>DESCRIPTION</th>
          <th>ASSIGNED</th>
          <th>DATE</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ABC</td>
          <td>Joe</td>
          <td>123-456</td>
          <td>Clerk</td>
          <td>Office</td>
          <td>2011/04/25</td>
        </tr>
        <tr>
          <td>ABC</td>
          <td>John</td>
          <td>123-457</td>
          <td>Assistant</td>
          <td>Field</td>
          <td>2011/07/25</td>
        </tr>
        <tr>
          <td>XYZ</td>
          <td>Jane</td>
          <td>123-458</td>
          <td>Clerk</td>
          <td>Field</td>
          <td>2009/01/12</td>
        </tr>
        <tr>
          <td>XYZ</td>
          <td>Anne</td>
          <td>123-459</td>
          <td>Assistant</td>
          <td>Office</td>
          <td>2012/03/29</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

您正在覆盖 DataTables 搜索框的行为，并且可能会错过 DataTables 在幕后所做的一些事情以保留该值。此外，您的覆盖实现使用search() 的默认值，并且可以安全地删除。删除后，代码可以正常工作。

请参阅this JSFiddle 进行演示。

要禁用搜索某些列，请在列定义中使用'searchable': false，如下所示。

   var oTable = $('#tTable').dataTable({
        "autoWidth": false,
        "aaSorting": [],
        "bLengthChange": false,
        "bPaginate": false,
        "searchCols": [{ "search": "ABC" }, null, null, null, null, null], //Initial Column search
        "columnDefs": [
           // Diasble sorting on certain columns     
           { "sortable": false, "targets": [0, 1, 2, 3, 4] }, 
           // Diasble searching on certain columns     
           { "searchable": false, "targets": [1, 2, 3, 5] }
        ]
});

请参阅this JSFiddle 进行演示。

Answer 2

我通过使用“dom”禁用默认输入字段并使用我自己的输入字段来使其工作。在这里摆弄：http://jsfiddle.net/f95jg24c/

var oTable = $('#tTable').dataTable({
"dom": 'lrtip', //Remove the global filter (Default is 'lfrtip')

....

$('.customSearch input') //Change
    .off()
    .on('keyup input', function (e) {
       oTable.api().column(4).search(this.value, false, true).draw();
    });

<div class="customSearch">
  <label for="Search">Search: </label>
  <input id="Search"/>
</div>