Hide row if date has passed

mrogers

I would like to hide a row in a table if the date shown in one of the cells has passed. In this example, the first row would be hidden:

<table>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Sun Feb 23 2020</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Tue Feb 23 2021</td>
  </tr>
</table>

Here's what I tried:

createdRow: function (row, data, dataIndex) {
        var now = new Date();
        let expire = new Date(data[2]);
        if (now > expire) {
          $(row).hide();
        }
      }

rf1234

Just use rowCallback

https://datatables.net/reference/option/rowCallback

allan

Hi,

You might be interested in this example which uses the DateTime picker to implement filtering. Even if you don’t want to allow the end user to select specific dates, I’d still recommend implementing row hiding in DataTables by using a filter (see docs here) rather than by using $().hide(). The problem with just marking the element as display: none is that DataTables can’t take account of that in its pagination or filtering. So you might end up with a case were ten rows are been hidden, with nothing to show because all matching records are another page.

Allan

mrogers

Rather than hide the rows, I've decided to append some text. It works, but only if I paginate back and forth. The first page has nothing appended, when it should. But if I go to the next page, then go back, the text appears.

rowCallback: function () {
        var now = new Date();
        $("td:nth-child(5)").each((idx, ele) => {
          let expire = new Date($(ele).text());
          if (now > expire) {
            $(ele).append(" <span class='closed'> CLOSED </span>");
          }
        });
      },

mrogers

Update: It works with drawCallback