Filtering html table using jQuery

Question

I have an HTML table like this:

<table id="tableRegister" border="1">
    <tr>
        <th>Fullname</th>
        <th>Age</th>
        <th>Sport</th>
        <th>Class </th>
        <th>Term</th>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
        <td>Thulasiram.S</td>
        <td>11</td>
        <td>Chess</td>
        <td>1</td>
        <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
        <td>ST Ram</td>
        <td>11</td>
        <td>Cricket</td>
        <td>1</td>
        <td>Month</td>
    </tr>
    <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
        <td>Ram Kumar.S</td>
        <td>21</td>
        <td>Chess</td>
        <td>2</td>
        <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
        <td>Dinesh Kumar.S</td>
        <td>30</td>
        <td>Chess</td>
        <td>3</td>
        <td>Week</td>
    </tr>
</table>

I want to filter it based on three columns Age Class and Term. So the distinct values of the columns are inside three select boxes:

    <select class="age" data-attribute="age" >
        <option value="all">Select age</option>
            <option value="11">11</option>
            <option value="21">21</option>
            <option value="30">30</option>
            <option value="32">32</option>
    </select>
    <select class="class" data-attribute="class">
            <option value="all">Select Class </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
    </select>

When the default option is selected in all of them I want to display all. To make it easier during the table rendering I put three attributes in each row that contains the value of each of these three fields that are filterable for the current row: data-age="", data-class="" and data-term="".

So I want to be able to filer based on these, but I'm having a problem whether the options are reselected because it happens it hide all the rows. Can someone help me cause I'm stuck on this? Here's the [JS FIDDLE][1]

    $(".age").on("change",function(){
        ageVal = $(this).val();
        updateTable(ageVal,'age');
    });

    $(".class").on("change",function(){
        classVal = $(this).val();
        updateTable(classVal,'class');
    });

    $(".term").on("change",function(){
        termVal = $(this).val();
        updateTable(termVal, 'term');
    });

    var tableRows = $('#tableRegister').find('.filter-row');

    function updateTable(selectVal, attribute){

        if(selectVal === 'all'){
            // show all
            $('.filter-row').show();
        }else{
            tableRows.each(function(){
                var rowAttValue = $(this).attr("data-"+attribute);
                if(selectVal === rowAttValue){
                    $(this).addClass('show');
                    $(this).show();
                }else{
                    $(this).addClass('hide');
                    $(this).hide();
                }
            });
        }
    }

There is too much code in this. Can you remove all the part that is not related to the problem? — Tree Nguyen
– Tree Nguyen, Commented Feb 22, 2018 at 0:54

Pedro Martins · Accepted Answer · 2018-02-22 01:34:29Z

The problem is that you are relying in equality to show the row and you're not considering the other filters.

I've rewrite your code to process all the filters and hide the row when one of the filters is different from the cell value.

This code can also be optimized.

Please find my JSFiddle here

Javascript:

$('.filtert').hide();

var $tableRows = $('#tableRegister .filter-row');
$(".columnfilter").on("change", function() {
  // Builds the filters for all the columns:
  var filters = [];
  $(".columnfilter").each(function() {
    var $that = $(this);
    var value = $that.val();
    if (value != 'all') {
      filters.push({
        at: $that.data('attribute'),
        val: value
      });
    }
  });

  var filtersLength = filters.length;
  if (filtersLength == 0) {
    $('.filtert').hide();
    $tableRows.show();
  } else {
    $('.filtert').show();

    // Apply filters:
    $tableRows.each(function() {
      var $that = $(this);
      var showRow = true;
      for (var i = 0; i < filtersLength; i++) {
        var filter = filters[i];
        var rowAttValue = $(this).data(filter.at);
        if (rowAttValue != filter.val) {
          showRow = false;
          break;
        }
      }

      $that.toggle(showRow);
    });
  }
});

plonknimbuzz · Accepted Answer · 2018-02-22 01:42:17Z

you can use :containts to search text(). then you no need all your data-attribute anymore

$(function(){
        $(".age, .class, .term").change(function(){
            search();
        });

        function search(){
            let ageVal = $('.age').val(),
            classVal = $('.class').val(),
            termVal = $('.term').val();

            $('.filter-row').show(); //reset
            if(ageVal !='all')
                $('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();

            if(classVal !='all')
                $('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();

            if(termVal !='all')
                $('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
        }

    });

     <p class="filtert">
     Filtering
     </p>
     <select class="age" data-attribute="age" >
            <option value="all">Select age</option>
                <option value="11">11</option>
                <option value="21">21</option>
                <option value="30">30</option>
                <option value="32">32</option>
        </select>
        <select class="class" data-attribute="class">
                <option value="all">Select Class </option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
        </select>
        <select class="term" data-attribute="term">
            <option value="all"> Select </option>
            <option value="Day">Day</option>
            <option value="Week">Week</option>
            <option value="Month">Month</option>
      </select>
    <br>
    <table id="tableRegister" border="1">
        <tr>
            <th>Fullname</th>
            <th>Age</th>
            <th>Sport</th>
            <th>Class </th>
            <th>Term</th>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
            <td>Thulasiram.S</td>
            <td>11</td>
            <td>Chess</td>
            <td>1</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
            <td>ST Ram</td>
            <td>11</td>
            <td>Cricket</td>
            <td>1</td>
            <td>Month</td>
        </tr>
        <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
            <td>Ram Kumar.S</td>
            <td>21</td>
            <td>Chess</td>
            <td>2</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
            <td>Dinesh Kumar.S</td>
            <td>30</td>
            <td>Chess</td>
            <td>3</td>
            <td>Week</td>
        </tr>
        <tr class="filter-row " data-age="11" data-class="2" data-term="Day">
            <td>Raja Ram.S</td>
            <td>11</td>
            <td>Football</td>
            <td>2</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row " data-age="32" data-class="3" data-term="Month">
            <td>Priya</td>
            <td>32</td>
            <td>Cricket</td>
            <td>3</td>
            <td>Month</td>
        </tr>
    </table>
	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
	$(function(){
		$(".age, .class, .term").change(function(){
			search();
		});
		
		function search(){
			let ageVal = $('.age').val(),
			classVal = $('.class').val(),
			termVal = $('.term').val();
			
			$('.filter-row').show(); //reset
			if(ageVal !='all')
				$('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();
			
			if(classVal !='all')
				$('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();
			
			if(termVal !='all')
				$('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
		}

	})
	</script>

Collectives™ on Stack Overflow

Filtering html table using jQuery

2 Answers 2

Javascript:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Javascript:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related