jQuery DataTable - 搜索一列下拉菜单

Question

我有一个简单的 jQuery 数据表，其中包含 4 列，其中一列是下拉列表。

 <!-- 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();
       }
     });
   });
 });

正如您从上面的代码中看到的，您可以单独搜索每一列。我遇到的问题是仅在带有下拉列表的列中搜索选定的选项。例如，当我搜索 Name 1 时，我应该只得到 New York 行，但我得到了所有行，因为 Name 1 仍然存在于所有下拉列表中，只是没有被选中。

有人知道如何过滤搜索功能以便只显示所选项目吗？

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

谢谢！

Answer 1

检查此 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;

                }
            );

希望这是你需要的。

此致，你

jQuery DataTable - 搜索一列下拉菜单

jQuery DataTable - Search a column of dropdowns

jquery

datatables

datatables-1.10