jQuery DataTable-搜索一列下拉列表_Jquery_Datatables_Datatables 1.10

jQuery DataTable-搜索一列下拉列表

jquery datatables

jQuery DataTable-搜索一列下拉列表,jquery,datatables,datatables-1.10,Jquery,Datatables,Datatables 1.10,我有一个简单的jQuery数据表，它包含4列，其中一列是下拉列表  <body> <table id="vendorListing"> <tfoot> <tr> <th class="searchBox">Vendor Location</th>

我有一个简单的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();
       }
     });
   });
 });


供应商位置
通货
供应商类型
小贩
供应商位置
通货
供应商类型
小贩
纽约
美国人
钢
供应商名称1
供应商名称2
供应商名称3
供应商名称4
供应商名称5
蒙特利尔
加拿大人
塑料
供应商名称1
供应商名称2
供应商名称3
供应商名称4
供应商名称5
多伦多
加拿大人
后勤
供应商名称1
供应商名称2
供应商名称3
供应商名称4
供应商名称5
洛杉矶
美国人
木材
供应商名称1
供应商名称2
供应商名称3
供应商名称4
供应商名称5
西雅图
美国人
服务
供应商名称1
供应商名称2
供应商名称3
供应商名称4
供应商名称5
#供应商列表包装{
宽度：800px；
}   
#供应商列表过滤器{
显示：无；
}   
.奇怪{
背景：#dddddd！重要；
}   
.甚至{
背景：#ffffff；
}
var vendorTable=“”；
$（函数（）{
$（“#供应商列出tfoot th.searchBox”）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
});
vendorTable=$（“#vendorListing”）.DataTable（）；
vendorTable.columns（）.every（函数（））{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，function（））{
if（that.search（）！==此.value）{
那个
.search（此.value）
.draw（）；
}
});
});
});

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

是否知道如何过滤搜索功能，以便只显示选定的项目作为结果

谢谢

检查这个。您需要做的是覆盖默认搜索

$.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;

                }
            );

希望这是你需要的

问候,，

Yeou

这就成功了，Yeou。未意识到必须覆盖默认搜索。-谢谢