Question

我有一个简单的数据表，看起来像：

<table>
    <thead>
      <tr>
        <th>From</th>
        <th>To</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>From</th>
        <th>To</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Anchorage</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Toronto</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
      <!-- etc -->
    </tbody>
</table>

我想创建一个select选项来过滤所有表的结果，但希望它能够显示来自两列的数据。例如：

<select>
 <option>Anchorage</option>
 <option>Calgary</option>
 <option>Vancouver</option>
 <option>Toronto</option>
</select>

此刻我得到了

<select>
 <option>Anchorage</option>
 <option>Calgary</option>
</select>

我尝试过使用columnDefs，但不知道如何让它将两列数据合并到一个选择中而不影响两列的显示。

这是我正在使用的jQuery

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

    initComplete: function () {

      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo( $(column.footer()).empty() )
          .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search( val ? '^'+val+'$' : '', true, false )
              .draw();
          } );

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      } );
    }

} );


table.on('draw', function () {
    table.columns().indexes().each( function ( idx ) {
      var select = $(table.column( idx ).footer()).find('select');

      if ( select.val() === '' ) {
        select
          .empty()
          .append('<option value=""/>');

        table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      }
    } );
} );

Answer 1

＆＃13;

$("tbody td").each(function(){
    var text = $(this).text();
    if ($("select > option:contains('" + text + "')").length == 0)
        $("select").append("<option>" + text + "</option>");
});

＆＃13;

table, tr, td {
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
      <tr>
        <td>Anchorage</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Toronto</td>
      </tr>
      <tr>
        <td>Vancouver</td>
        <td>Calgary</td>
      </tr>
    </tbody>
  </table>
  <select></select>

＆＃13;

Answer 2

我设法通过添加以下内容来实现此目的。

在表格中，我向tfoot添加了2个类：

    <tfoot>
      <tr>
        <th class="sel1">From</th>
        <th class="sel2">To</th>
      </tr>
    </tfoot>

然后在底部添加了以下jQuery：

    $("tbody td:nth-child(2)").each(function(){
    var text = $(this).text();
    console.log(text);
    if ($(".sel1 select > option:contains('" + text + "')").length == 0)
        $(".sel1 select").append("<option>" + text + "</option>");
});


$('.sel1 select').unbind().on('change', function() {
    var searchTerm = this.value.toLowerCase();
    console.log(searchTerm);
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
       //search only in column 1 and 2
       if (~data[0].toLowerCase().indexOf(searchTerm)) return true;
       if (~data[1].toLowerCase().indexOf(searchTerm)) return true;
       return false;
   })
   table.draw(); 
   $.fn.dataTable.ext.search.pop();
})

上面的jQuery是类驱动的，目标是正确的选择并添加值。底部函数是用于搜索两列的自定义函数。取自：How can I search multiple columns in DataTables

数据表：组合两列以创建一个用于搜索的选择

2 个答案: