0

As a Dr. Frankenstein of coding, I have managed to cobble together a table as exampled [here][1], utilising datatables and UK Date Sorting. The final piece of this puzzle is to find a way to be able to hide an entire row if the date in the corresponding row is older than the current date (i.e. if a date in a td element is older than today's date, hide the row containing that td element).

Is there a js solution to this problem? Any help much appreciated.

Edit: Code as requested:

<html>
<head>
<title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>

    // UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};


$(document).ready(function() {

$("#table_id").dataTable({
    "aoColumnDefs" : [
{"aTargets" : [2] , "sType" : "uk_date"}
]

});
});
</script>
</head>
<body>
<div class="page-header">
<h2>Heading</h2>
</div>
<div class="table-responsive">
<table id="table_id" class="table table-striped table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Lecture name</th>
<th>Lecturer</th>
<th class="uk-date-column">date</th>
<th>time</th>
<th>link</th>
</tr>
</thead>
<tbody>
<TR>
<TD>Lecture 1</TD>
<TD>Lecturer 1</TD>
<TD>01/10/2014</TD>
<TD ALIGN="RIGHT">11:00</TD>
<TD>Link 1</TD>
</TR>
<TR>
<TD>Lecture 2</TD>
<TD>Lecturer 2</TD>
<TD>02/10/2014</TD>
<TD ALIGN="RIGHT">11:00</TD>
<TD>Link 2</TD>
</TR>
</tbody>
</table>
</div>
</body>
</html>
user3568306
  • 1
  • 2

2 Answers2

0

Give that particular td some class say "clsdate".Then point the class and find the html and convert that to date. Find the difference and do the necessary

$('table').find(".clsdate").each(function(index,element){
  var tdDate=new Date($(element).html());
  var currDate=getDate();
  var diff=currDate-tdDate;
   if(diff<0)
   {
     $(element).parent('tr').css('display','none');
   }
});
Arvin
  • 954
  • 3
  • 14
  • 33
0
$(document).ready(function() {

    $("#table_id").dataTable({"aoColumnDefs" : [
      {"aTargets" : [2] , "sType" : "uk_date"}]});

  $('TD.date').each(function( index ) {  
    var q = new Date();
    var m = q.getMonth();
    var d = q.getDay();
    var y = q.getYear();

    var date = new Date(y,m,d);
    if(new Date($(this).text()) < date)    {

        $(this).parent().attr("style", "display: none")
    }
      });

});

and add a date class to the column that contains the date.

Bonomi
  • 2,541
  • 5
  • 39
  • 51
  • I'm trying this solution however I'm not having any luck. Is there anything specific I need to put for the date class, or is 'class="date"' sufficient? – user3568306 Oct 02 '14 at 13:15
  • 10/02/2014 and 10/01/2014. I also changed the date to become with the month first, in my machine culture it was comparing the wrong date. Just put a console.log(date) to see both dates in case the result not be the desired – Bonomi Oct 02 '14 at 13:32