jQuery DataTable - 드롭 다운의 열 찾기

4 개의 열과 하나의 열이 포함 된 간단한 jQuery Datatable이 드롭 다운 목록입니다.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을 검색 할 때 New York 행만 가져와야하지만 이름 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; 

       } 
      );

희망 사항.

감사합니다, 트릭, Yeou했다

출처

2017-09-05 18:14:53 Yeou

Yeou. 기본 검색을 재정의해야한다는 것을 알지 못했습니다. - 감사! – Robert

jQuery DataTable - 드롭 다운의 열 찾기

답변

관련 문제