CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10
Robert
Robert

Reputation: 159

jQuery DataTable - Search a column of dropdowns

I have a simple jQuery Datatable that contains 4 columns and one of the columns is a list of dropdowns.

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

As you can see from the above code you can search each column individually. The issue I'm having is searching for only the selected options in the column with the dropdowns. For example, when I search for Name 1 I should only get the New York row, but I get all the rows because Name 1 still exists in all the dropdowns, it just isn't selected.

Any know how to filter the search feature so only the selected items come up as a result?

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

Thanks!

Upvotes: 3

Views: 1143

Answers (1)

Yeou
Yeou

Reputation: 632

Check this jsfiddle. What you need to do is override the default search.

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

                }
            );

Hope this is what you need.

Regards, Yeou

Upvotes: 3

Related Questions