jQuery DataTable - 搜索一列下拉列表

我有一个简单的jQuery Datatable，其中包含4列，其中一列是下拉列表。jQuery DataTable - 搜索一列下拉列表

<!-- HTML CODE --> 
     <body> 
      <table id="vendorListing"> 
      <tfoot> 
       <tr> 
       <th class="searchBox">Vendor Location</th> 
       <th class="searchBox">Currency</th> 
       <th class="searchBox">Vendor Type</th> 
       <th class="searchBox">Vendor</th> 
       </tr> 
      </tfoot> 
      <thead> 
       <tr> 
       <th>Vendor Location</th> 
       <th>Currency</th> 
       <th>Vendor Type</th> 
       <th>Vendor</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr id="1"> 
       <td> 
        <span id="vendorLocation_1" class="vendorLocation">New York</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">American</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Steel</span> 
       </td> 
       <td> 
        <select id="vendorDropdown_1" class="vendorDropdown"> 
        <option value="1" selected="selected">Vendor Name 1</option> 
        <option value="2">Vendor Name 2</option> 
        <option value="3">Vendor Name 3</option> 
        <option value="4">Vendor Name 4</option> 
        <option value="5">Vendor Name 5</option> 
        </select> 
       </td> 
       </tr> 
       <tr id="2"> 
       <td> 
        <span id="vendorLocation_2" class="vendorLocation">Montreal</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Canadian</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Plastic</span> 
       </td> 
       <td> 
        <select id="vendorDropdown_2" class="vendorDropdown"> 
        <option value="1">Vendor Name 1</option> 
        <option value="2" selected="selected">Vendor Name 2</option> 
        <option value="3">Vendor Name 3</option> 
        <option value="4">Vendor Name 4</option> 
        <option value="5">Vendor Name 5</option> 
        </select> 
       </td> 
       </tr> 
       <tr id="3"> 
       <td> 
        <span id="vendorLocation_3" class="vendorLocation">Toronto</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Canadian</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Logistics</span> 
       </td> 
       <td> 
        <select id="vendorDropdown_3" class="vendorDropdown"> 
        <option value="1">Vendor Name 1</option> 
        <option value="2">Vendor Name 2</option> 
        <option value="3">Vendor Name 3</option> 
        <option value="4">Vendor Name 4</option> 
        <option value="5" selected="selected">Vendor Name 5</option> 
        </select> 
       </td> 
       </tr> 
       <tr id="4"> 
       <td> 
        <span id="vendorLocation_4" class="vendorLocation">Los Angeles</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">American</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Lumber</span> 
       </td> 
       <td> 
        <select id="vendorDropdown_4" class="vendorDropdown"> 
        <option value="1">Vendor Name 1</option> 
        <option value="2">Vendor Name 2</option> 
        <option value="3">Vendor Name 3</option> 
        <option value="4" selected="selected">Vendor Name 4</option> 
        <option value="5">Vendor Name 5</option> 
        </select> 
       </td> 
       </tr> 
       <tr id="5"> 
       <td> 
        <span id="vendorLocation_5" class="vendorLocation">Seattle</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">American</span> 
       </td> 
       <td> 
        <span id="vendorCurrency_1" class="vendorCurrency">Services</span> 
       </td> 
       <td> 
        <select id="vendorDropdown_5" class="vendorDropdown"> 
        <option value="1">Vendor Name 1</option> 
        <option value="2">Vendor Name 2</option> 
        <option value="3">Vendor Name 3</option> 
        <option value="4" selected="selected">Vendor Name 4</option> 
        <option value="5">Vendor Name 5</option> 
        </select> 
       </td> 
       </tr> 
      </tbody> 
      </table>  
     </body> 

<!-- CSS --> 
    #vendorListing_wrapper { 
     width: 800px; 
    } 
    #vendorListing_filter { 
     display: none; 
    } 
    .odd { 
     background: #dddddd !important; 
    } 
    .even { 
     background: #ffffff; 
    } 

<!-- jQuery --> 
var vendorTable = ""; 
$(function() { 
    $('#vendorListing tfoot th.searchBox').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search ' + title + '" id="search_' + title.replace(" ", "") + '" />'); 
    }); 
    vendorTable = $("#vendorListing").DataTable(); 
    vendorTable.columns().every(function() { 
    var that = this; 
    $('input', this.footer()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
     that 
      .search(this.value) 
      .draw(); 
     } 
    }); 
    }); 
});

从上面的代码可以看出，您可以单独搜索每个列。我遇到的问题是仅使用下拉列表搜索列中的选定选项。例如，当我搜索名称1时，我应该只能得到纽约行，但是我得到所有行，因为名称1仍然存在于所有下拉列表中，但它并未被选中。

任何知道如何过滤搜索功能，所以只有选定的项目作为结果？

https://jsfiddle.net/wbfsLx2x/2/

谢谢！

来源

2017-09-05 Robert

选中此jsfiddle。你需要做的是重写默认搜索。

$.fn.dataTable.ext.search.push(
       function (settings, data, dataIndex, rowData, counter) {  

        var search_VendorLocationText = $('#search_VendorLocation').val();   
        var search_CurrencyText = $('#search_Currency').val();   
        var search_VendorTypeText = $('#search_VendorType').val(); 
        var search_VendorText = $('#search_Vendor').val();   
        var textFound = true; 

        if(search_VendorLocationText.length){ 
         var pattern = new RegExp(search_VendorLocationText, 'i'); 
         if(pattern.test(data[0])){ 
          textFound = true; 
         }else{ 
          textFound = false; 
         } 
        } 
        if(search_CurrencyText.length){ 
         var pattern = new RegExp(search_CurrencyText, 'i'); 
         if(pattern.test(data[1])){ 
          textFound = true; 
         }else{ 
          textFound = false; 
         } 
        } 
        if(search_VendorTypeText.length){ 
         var pattern = new RegExp(search_VendorTypeText, 'i'); 
         if(pattern.test(data[2])){ 
          textFound = true; 
         }else{ 
          textFound = false; 
         } 
        } 
        if (search_VendorText.length) {       
         var pattern = new RegExp(search_VendorText, 'i'); 
         if (pattern.test($(rowData[3]).children("option:selected").html())) { 
          textFound = true; 
         }else{ 
          textFound = false; 
         }     
        } 
        return textFound; 

       } 
      );

希望这是你所需要的。

Regards， Yeou

来源

2017-09-05 18:14:53 Yeou

这样做的伎俩，嗯。没有意识到默认搜索必须被覆盖。 - 谢谢！ – Robert

jQuery DataTable - 搜索一列下拉列表

回答

相关问题