Search datatable based on dropdown and input field

Question

I have created a datatable and above a dropdown with an input field.

I would like to sort based on the action that I choose with the drop down.

The search within the column is working correctly. I would like to search using the action of the dropdown menu. Find below my viable example:

$(document).ready(function() {
  var table = $('.datatable-responsive').DataTable();

  /**
   * Dropdown with Input Field
   */
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var changePercentageInput = parseInt($('#changePercentageInput').val(), 10);
      var changePerc = parseFloat(data[4]) || 0; // use data for the changePerc column

      if ((isNaN(changePercentageInput)) ||
        (changePercentageInput <= changePerc)) {
        return true;
      }
      return false;
    }
  );

  $('#changePercentageInput').keyup(function() {
    table.draw();
  });
});





  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  
  
    
    
      
        
          
            
              
                % Change:
                
                  
                    
                      
                      
                        Below
                        Below or equal
                        Above
                        Above or equal
                        Equal
                        Not equal
                      
                    
                    
                  
                
              
            
          
        
      
    
    
      
        
          
            
              #
              Stock
              SYMBOL
              LAST
              CHG %
              CHG
              HIGH
            
          
          
            
              1
              USD/BTC
              USD
              0.00061720
              -181.40%
              -0.00001140
              0.00065050
            
            
              2
              EUR/Rubel
              EUR
              0.00767000
              -166.70%
              -0.00013000
              0.00803000
            
            
              3
              Yen/USD
              Yen
              0.00000000
              -0.1112%
              0.00000000
              0.00000000
            
            
              4
              Yen/EUR
              Yen
              0.00000000
              0.01%
              0.00000000
              0.00000000
            
            
              5
              Rubel/Yen
              Rubel
              0.00658300
              28.90%
              0.00001900
              0.00707600
            
            
              6
              EUR/USD
              EUR
              0.00000040
              256.41%
              0.00000001
              0.00000042

Any suggestions how to link the action of the dropdown field to the search?

shubham · Accepted Answer

Didn't get how you would select from the div dropdown so added my own 'select' dropdown, you can change it as needed. Also the parseFloat and parseInt failed on 'Equal' so I changed it both to parseFloat.

          
               
                      
                              Below
                              Below or equal
                              Above
                              Above or equal
                              Equal
                              Not equal

JS Below

$(document).ready(function () {
        var table = $('.datatable-responsive').DataTable();
        var op = "<";
        /**
         * Dropdown with Input Field
         */
        var operators = {
            "==": function (a, b) { return a == b; },
            "<=": function (a, b) { return a <= b; },
            ">=": function (a, b) { return a >= b; },
            "<": function (a, b) { return a < b; },
            ">": function (a, b) { return a > b; },
            "!=": function (a, b) { return a != b; }
        };

        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var changePercentageInput = parseFloat($('#changePercentageInput').val(), 10);
                var changePerc = parseFloat(data[4]) || 0; // use data for the changePerc column

                if ((isNaN(changePercentageInput)) || (operators[op](+changePercentageInput, +changePerc))) {
                    console.log(changePercentageInput + " " + changePerc);
                    return true;
                }
                return false;
            }
        );
        $('#operator').on('change', function () {
            op = this.value;
            table.draw();
        });
        $('#changePercentageInput').keyup(function () {
            table.draw();
        });
    });

Search datatable based on dropdown and input field

Answers (1)

Related Questions