数据表：结合两列创建一个选择搜索

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> 
<option>Anchorage</option> 
<option>Calgary</option> 
<option>Vancouver</option> 
<option>Toronto</option> 
</select> 

而此刻我得到

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

我一直在使用columnDefs尝试，但不知道如何得到它在两个数据合并到一个选择而不会影响显示器两列。

这是我使用

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

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

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

<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>

Answer 2

我设法得到这种通过将下面的工作jQuery的。

在该表中我加入2×类别到TFOOT：

<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