JQuery - Re-arrange table rows based on select dropdown value

Question

I have a select dropdown and a table. What I'd like to do is when we select from the dropdown menu, a count will be displayed to let us know how many items are in the table (this was done) and also re-arrange the row by bringing the queried/relevant rows to the top. In the example, I'd like for all rows with "Software" to be brought to the top if Software was selected from the dropdown. Thanks for help!

Here's what I have so far - jquery 1.7.2
https://jsfiddle.net/hv0wfds4/12/

Here's the code: JS:

function filterProduct(){
  $product_dd = $('#product_select').val();
  if($product_dd =="All"){
    $('#count_co_prod').text($('#part_list_body tr').length);     
  } else {
  products = $('tr').find("td:contains('"+$product_dd+"')").length;
  $('#count_co_prod').text(products); 
  }
}

HTML

<select id="product_select" onchange="filterProduct()" style="width:300px">
<option value="All">All</option>
<option value="Communications">Communications</option>
<option value="Software">Sofware</option>
</select>

<p>Count Product Category: <span style="color:red" id="count_co_prod"></span></p>

<table id="part_list" width="500px" border="1">
  <thead>
    <tr>
      <th>Company</th>
      <th>Product Category</th>
    </tr>
  </thead>
  <tbody id="part_list_body">
    <tr>
      <td>1C</td>
      <td>Communications</td>
    </tr>
    <tr>
      <td>2S</td>
      <td>Software</td>
    </tr>
  ...
  </tbody>
</table>

I suggest using one of the various frameworks built for this exact thing. One is DataTables, — Redmega
– Redmega, Commented Apr 18, 2016 at 16:32

DK3 · Accepted Answer · 2016-04-18 16:56:11Z

3

you can use like that, i hope it helps you.

function filterProduct(){
 $product_dd = $('#product_select').val();
 if($product_dd =="All"){
  $('#count_co_prod').text($('#part_list_body tr').length);       
 } else {
    products = $('tr').find("td:contains('"+$product_dd+"')").length;
    var tablerow = $('tr').find("td:contains('"+$product_dd+"')").parent();
 $(tablerow).remove();
 $("#part_list_body").prepend(tablerow);
 $('#count_co_prod').text(products); 
 }
}

demo here

answered Apr 18, 2016 at 16:56

DK3

4032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kelly SD Over a year ago

Thank you DK3! Exactly what I was looking for. Much appreicated!

Sarath Chandra · Accepted Answer · 2016-04-18 19:06:11Z

1

This should do it

function filterProduct(){
  var product_dd = $('#product_select').val();   
  if(product_dd =="All"){
    var els = $('tbody tr').sort( function(a,b){
        return $(b).find('td:first').text() < $(a).find('td:first').text();
    });
    $('tbody').append(els);
    $('#count_co_prod').text($('#part_list_body tr').length);     
  } else { 
    var products = 0;
    $('tbody tr').each( function(){
        if($(this).find('td:last').text() != product_dd){
            $(this).prop('sortOrder', -1);
        } else {
            products++;
            $(this).prop('sortOrder', 1);
        }
    });
    var els = $('tbody tr').sort( function(a,b){
        return parseInt($(b).prop('sortOrder')) -  parseInt($(a).prop('sortOrder'));
    });
    $('tbody').append(els);
    $('#count_co_prod').text(products);
  }
}

Working JSFiddle here: https://jsfiddle.net/GSarathChandra/hv0wfds4/26/

edited Apr 18, 2016 at 19:06

answered Apr 18, 2016 at 16:46

Sarath Chandra

1,87621 silver badges40 bronze badges

1 Comment

Kelly SD Over a year ago

Thanks Sarath! I would accept this as a solution, but given the context of my project, response from DK3 is the perfect solution.

Community · Accepted Answer · 2017-05-23 12:07:37Z

0

Its only possible using dynamic table creating because you have not using any database your data is hard coded try to add array[] in your data and use dynamic creating html table or search Datatable its reach functionality of grid.

Collectives™ on Stack Overflow

JQuery - Re-arrange table rows based on select dropdown value

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related