how to filter data in a table on button click using jquery

Question

I have to filter data in my table on the basis of a particular column's value. This is my table

And I want to filter this table on the basis of last column "STATUS" which shows whether a student is verified or not. And I have to do this on the click event of button. This is my button

I want when I click this "verified student" button, the table just show the list of verified students and hide the unverified students. I am a bit confused please help.

<table id="Skilllist" class="table  table-striped table-bordered ">
  <thead class="text-center">
    <tr>
      <th>
        <input type="checkbox" class="allchk1" id="allchk" />
      </th>
      <th>S.NO.</th>
      <th>CAMPUS</th>
      <th>ROLL NO.</th>
      <th>NAME</th>
      <th>Gender</th>
      <th>EMAIL ID</th>
      <th>CGPA</th>
      <th>PS Type</th>
      <th>Batch</th>
      <th>STATUS</th>
    </tr>
  </thead>
  <tbody id="Studentlistdata">
  </tbody>
</table>

<div style="display: none">
  <table>
    <tbody>
      <tr id="Studentlist1">
        <td>
          <input type="checkbox" class="Allchk" chk="chk" id="Chek1" />
        </td>
        <td id="Srno" class="ver unver"></td>
        <td id="Campus" class="ver unver"></td>
        <td id="RollNo" class="rollnumber ver unver"></td>
        <td id="Name" class="ver unver"></td>
        <td id="disc" class="ver unver"></td>
        <td id="email" class="ver unver"></td>
        <td id="Cgpa" class="ver unver"></td>
        <td id="pstype" class="ver unver"></td>
        <td id="batchname" class="ver unver"></td>
        <td id="sta" class="ver unver">
          <label id="sta1" class="label label-default">Not Verified</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Do an ajax call to ur backend method and filter your results or use jquery datatable as a work around. — Sorangwala Abbasali
– Sorangwala Abbasali, Commented Feb 1, 2017 at 10:49

M. Wiśnicki · Accepted Answer · 2017-02-01 11:06:03Z

3

You can filter it using this method:

hide() all tr finded in tbody (in demo case called stud_body), next show() all items in rows which contains specified status, rows.filter(":contains('yourStatus')").show()

$("#searchButton").click(function () {
    var rows = $("#stud_body").find("tr").hide();
    rows.filter(":contains('OK')").show();
 });

demo: http://jsfiddle.net/w6mvoo7a/

edited Feb 1, 2017 at 11:06

answered Feb 1, 2017 at 11:00

M. Wiśnicki

6,2133 gold badges25 silver badges28 bronze badges

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

Comments

ugrprmk · Accepted Answer · 2017-02-01 10:53:48Z

1

add a class to your line when you creating the listing.

 <tr id="Studentlist1" class="ver">   //FOR VERIFIED
 <tr id="Studentlist1" class="nver">  //FOR NOT VERIFIED

THEN add a class to your table like "show-verified" with jquery when you click the button.

$( "#clicked_buttonName" ).click(function() {
  $(".yourTable").addClass("show-verified");
});

THEN write a css like

.show-verified .nver{display:hidden}

It will makes your Not Verified classes invisible

answered Feb 1, 2017 at 10:53

ugrprmk

111 bronze badge

Collectives™ on Stack Overflow

how to filter data in a table on button click using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related