javascript - 数据表 - 如何将搜索输入移出表

Question

请帮助我的代码。我搜索了表中与其他列关联的每一列。我想将搜索输入移出具有相同功能的表列之外。

我只找到了这个: https://datatables.net/reference/api/search()

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

但它正在所有表格列中搜索 - 这不是我需要的。

我的工作 fiddle :

https://jsfiddle.net/cm4t63ee/2/

我需要这样修改它:

https://jsfiddle.net/07hmjmv0/4/

非常感谢您的帮助!

Answer 1

创建了一个简化的示例，但这应该足以理解这个想法。

// DataTable
  var table = $('#example').DataTable();

  // Initialize search inputs
  $(".searchField").on("keyup change", function() {
    var input = $(this);
    var colIndex = parseInt(input.attr("column"));
    table.column(colIndex).search(input.val()).draw();
  });

.searchField {
  width: 80px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet"/>


<div class="container">
  <h3>Search in table columns</h3>
  <select class="searchField" column="0">
    <option value="">Select category</option>
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
  <input type="text" class="searchField" placeholder="Name" column="1">
  <input type="text" class="searchField" placeholder="Quantity" column="2">
  <input type="text" class="searchField" placeholder="Price" column="3">
  <input type="text" class="searchField" placeholder="Total" column="4">

  <hr />

  <table class="table display" id="example">
    <thead>
      <tr>
        <th>
          Category
        </th>
        <th>
          Name
        </th>
        <th>
          Quantity
        </th>
        <th>
          Price
        </th>
        <th>
          Total
        </th>
      </tr>

      <tr class="cus-footer">
        <th></th>
        <th class="text-input"></th>
        <th class="text-input"></th>
        <th class="text-input"></th>
        <th class="text-input"></th>
      </tr>
    </thead>



    <tbody>
      <tr class="odd" id="row_1" role="row">
        <td class="sorting_1">B</td>
        <td>P1</td>
        <td class=" sum">42</td>
        <td class=" sum">1</td>
        <td class=" sum">42</td>
      </tr>
      <tr class="even" id="row_2" role="row">
        <td class="sorting_1">A</td>
        <td>P2</td>
        <td class=" sum">1</td>
        <td class=" sum">2</td>
        <td class=" sum">2</td>
      </tr>
      <tr class="odd" id="row_3" role="row">
        <td class="sorting_1">A</td>
        <td>P3</td>
        <td class=" sum">1</td>
        <td class=" sum">3</td>
        <td class=" sum">3</td>
      </tr>
      <tr class="even" id="row_4" role="row">
        <td class="sorting_1">A</td>
        <td>P4</td>
        <td class=" sum">1</td>
        <td class=" sum">4</td>
        <td class=" sum">4</td>
      </tr>
      <tr class="odd" id="row_5" role="row">
        <td class="sorting_1">A</td>
        <td>P5</td>
        <td class=" sum">1</td>
        <td class=" sum">5</td>
        <td class=" sum">5</td>
      </tr>
      <tr class="even" id="row_6" role="row">
        <td class="sorting_1">A</td>
        <td>P6</td>
        <td class=" sum">1</td>
        <td class=" sum">6</td>
        <td class=" sum">6</td>
      </tr>
      <tr class="odd" id="row_7" role="row">
        <td class="sorting_1">A</td>
        <td>P7</td>
        <td class=" sum">1</td>
        <td class=" sum">7</td>
        <td class=" sum">7</td>
      </tr>
      <tr class="even" id="row_8" role="row">
        <td class="sorting_1">A</td>
        <td>P8</td>
        <td class=" sum">1</td>
        <td class=" sum">8</td>
        <td class=" sum">8</td>
      </tr>
      <tr class="odd" id="row_9" role="row">
        <td class="sorting_1">A</td>
        <td>P9</td>
        <td class=" sum">1</td>
        <td class=" sum">9</td>
        <td class=" sum">9</td>
      </tr>
      <tr class="even" id="row_10" role="row">
        <td class="sorting_1">A</td>
        <td>P10</td>
        <td class=" sum">1</td>
        <td class=" sum">10</td>
        <td class=" sum">10</td>
      </tr>
      <tr class="odd" id="row_11" role="row">
        <td class="sorting_1">B</td>
        <td>P11</td>
        <td class=" sum">1</td>
        <td class=" sum">11</td>
        <td class=" sum">11</td>
      </tr>
      <tr class="even" id="row_12" role="row">
        <td class="sorting_1">A</td>
        <td>P12</td>
        <td class=" sum">1</td>
        <td class=" sum">12</td>
        <td class=" sum">12</td>
      </tr>
      <tr class="odd" id="row_13" role="row">
        <td class="sorting_1">A</td>
        <td>P13</td>
        <td class=" sum">1</td>
        <td class=" sum">13</td>
        <td class=" sum">13</td>
      </tr>
      <tr class="even" id="row_14" role="row">
        <td class="sorting_1">A</td>
        <td>P14</td>
        <td class=" sum">1</td>
        <td class=" sum">14</td>
        <td class=" sum">14</td>
      </tr>
      <tr class="odd" id="row_15" role="row">
        <td class="sorting_1">A</td>
        <td>P15</td>
        <td class=" sum">1</td>
        <td class=" sum">15</td>
        <td class=" sum">15</td>
      </tr>
      <tr class="even" id="row_16" role="row">
        <td class="sorting_1">A</td>
        <td>P16</td>
        <td class=" sum">1</td>
        <td class=" sum">16</td>
        <td class=" sum">16</td>
      </tr>
      <tr class="odd" id="row_17" role="row">
        <td class="sorting_1">A</td>
        <td>P17</td>
        <td class=" sum">1</td>
        <td class=" sum">17</td>
        <td class=" sum">17</td>
      </tr>
      <tr class="even" id="row_18" role="row">
        <td class="sorting_1">A</td>
        <td>P18</td>
        <td class=" sum">1</td>
        <td class=" sum">18</td>
        <td class=" sum">18</td>
      </tr>
      <tr class="odd" id="row_19" role="row">
        <td class="sorting_1">A</td>
        <td>P19</td>
        <td class=" sum">1</td>
        <td class=" sum">19</td>
        <td class=" sum">19</td>
      </tr>
      <tr class="even" id="row_20" role="row">
        <td class="sorting_1">A</td>
        <td>P20</td>
        <td class=" sum">1</td>
        <td class=" sum">20</td>
        <td class=" sum">20</td>
      </tr>
      <tr class="odd" id="row_21" role="row">
        <td class="sorting_1">B</td>
        <td>P21</td>
        <td class=" sum">1</td>
        <td class=" sum">21</td>
        <td class=" sum">21</td>
      </tr>
      <tr class="even" id="row_22" role="row">
        <td class="sorting_1">A</td>
        <td>P22</td>
        <td class=" sum">1</td>
        <td class=" sum">22</td>
        <td class=" sum">22</td>
      </tr>
      <tr class="odd" id="row_23" role="row">
        <td class="sorting_1">A</td>
        <td>P23</td>
        <td class=" sum">1</td>
        <td class=" sum">23</td>
        <td class=" sum">23</td>
      </tr>
      <tr class="even" id="row_24" role="row">
        <td class="sorting_1">A</td>
        <td>P24</td>
        <td class=" sum">1</td>
        <td class=" sum">24</td>
        <td class=" sum">24</td>
      </tr>
      <tr class="odd" id="row_25" role="row">
        <td class="sorting_1">A</td>
        <td>P25</td>
        <td class=" sum">1</td>
        <td class=" sum">25</td>
        <td class=" sum">25</td>
      </tr>
      <tr class="even" id="row_26" role="row">
        <td class="sorting_1">A</td>
        <td>P26</td>
        <td class=" sum">1</td>
        <td class=" sum">26</td>
        <td class=" sum">26</td>
      </tr>
      <tr class="odd" id="row_27" role="row">
        <td class="sorting_1">A</td>
        <td>P27</td>
        <td class=" sum">1</td>
        <td class=" sum">27</td>
        <td class=" sum">27</td>
      </tr>
      <tr class="even" id="row_28" role="row">
        <td class="sorting_1">A</td>
        <td>P28</td>
        <td class=" sum">1</td>
        <td class=" sum">28</td>
        <td class=" sum">28</td>
      </tr>
      <tr class="odd" id="row_29" role="row">
        <td class="sorting_1">A</td>
        <td>P29</td>
        <td class=" sum">1</td>
        <td class=" sum">29</td>
        <td class=" sum">29</td>
      </tr>
      <tr class="odd" id="row_30" role="row">
        <td class="sorting_1">C</td>
        <td>P21</td>
        <td class=" sum">1</td>
        <td class=" sum">21</td>
        <td class=" sum">21</td>
      </tr>
    </tbody>
  </table>
</div>