Datatable hide rows based on column value

Question

I have this datatable that is generated by php dynamically once. But once it's loaded, I want to hide entire row which has status Pending. I have added class "cls_status" to last td of each tr so i want to hide that tr which last td has status Pending.

In below example once html loaded i want only 2 rows to display.

<table class="table dataTable no-footer" id="activitytabdata" role="grid">
    <thead>
      <tr role="row">
      <th>Date</th>
      <th>Activity Name</th>
      <th>Points Earned</th>
      <th>Expiry Date</th>
      <th>Status</th>
  </tr>          
    </thead>
    <tbody id="reward-data">
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Earned</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Earned</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Pending</td>
        <td class="cls_points">30.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Pending</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Expired</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Expired</td>
    </tr>
</tbody>

The best way is to filter it from the PHP, because what if there are thousands of it and half is not needed. — Vandolph Reyes, Sep 29 '18 at 12:19

Nezir · Accepted Answer · 2018-09-29T12:28:17.633

Please check this solution and update for your needs:

window.onload = function() {
var table = document.getElementById("activitytabdata");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     if(col.innerText == "Pending"){
        row.style="display:none;";
             console.log(col.innerText);
     }

   }  
}
};

<table class="table dataTable no-footer" id="activitytabdata" role="grid">
    <thead>
      <tr role="row">
      <th>Date</th>
      <th>Activity Name</th>
      <th>Points Earned</th>
      <th>Expiry Date</th>
      <th>Status</th>
  </tr>          
    </thead>
    <tbody id="reward-data">
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Earned</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Earned</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Pending</td>
        <td class="cls_points">30.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Pending</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Expired</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Expired</td>
    </tr>
</tbody>

NiRR · Answer 2 · 2018-09-29T17:30:17.443

-1

Here are your options:

use javascript to find the nodes you want to hide, and then apply a class to them that has display:none. this is how you find the text
use php to add a class to all the "Pending" rows, and then use css to hide that class.
if you have just begun with writing frontend code, then frameworks were made to make things like this easy. Try React or Angular.

edited Sep 29 '18 at 17:30

answered Sep 29 '18 at 12:14

NiRR

4,782
5
32
60

Datatable hide rows based on column value

2 Answers2