數據表：結合兩列創建一個選擇搜索

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