1

I know it is possible to do this using html and javaScript / jQuery but my knowledge of javaScript is minimal so I was really hoping for someone here to help me with a solution.

How can I hide a row in a table if the date in the row (td) is older than the present date?

In searching previous questions I found two similar questions / answers but I couldn't get them to work for me.

Hide table row after date in column

How to hide a table row if date in td is older than today's date?

What I have is a Wenzhixin bootstrap table populated with contents from a .json file. Each row of the table has one cell containing a date. Currently when the table loads its contents are sorted by date using the script below. The additional functionality I'm looking to achieve is as soon as the date is past I want that row to be hidden.

Thanks!

Here is a jsfiddle http://jsfiddle.net/ry9f3q1x/ (not sure why my basic sort isn't working in jsfiddle it works fine for me normally.)

My code:

HTML 

<table data-toggle="table" data-url="/data1.json" data-sort-name="date" data-sort-order="asc"> 
<thead>
<tr>
    <th data-field="eventdate" data-align="center" data-sorter="datesort">Date</th>
    <th data-field="thing" data-align="center">thing</th>
    <th data-field="thing2" data-align="center">thing2</th>
</tr>
</thead>
</table>

DateSort Script

function datesort(a,b) {
var x = new Date(a),
 y = new Date(b);
 if(!isFinite(x-y))
    return !isFinite(x) ? 1: -1;
else
return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

JSON

 [
{
    "eventdate": '01/14/2017',
    "thing": "Hello this is a",
    "thing2": "blah blah blah"
},
 {
    "eventdate": "12/04/2016",
    "thing": "Hello this is b",
    "thing2": "blah blah blah"
},
     {
    "eventdate": "05/04/1958",
    "thing": "Hello this is c",
    "thing2": "blah blah blah"
},
     {
    "eventdate": "11/23/1960",
    "thing": "Hello this is d",
    "thing2": "blah blah blah"
},
     {
    "eventdate": "01/17/2018",
    "thing": "Hello this is e",
    "thing2": "blah blah blah"
},
     {
    "eventdate": "01/08/2020",
    "thing": "Hello this is f",
    "thing2": "blah blah blah"
}
]
Community
  • 1
  • 1
Sam
  • 41
  • 1
  • 9

1 Answers1

1

Would it not be better to prefilter your json results? other wise you need to give each of your table rows () a unique id... you can use the following to jquery script to remove that table row 

$('#rowid').remove();

to give the table row an id it should look something like this:

<tr id="somesortofid">
LeahPleurodon
  • 21
  • 4
  • but how do you give a table row an id `` when it's a Wenzhixin bootstrap table being loaded from a .json file? Added a jsfiddle and all of my basic code above. Thanks! – Sam Dec 07 '16 at 02:59
  • In your html, where it says underneath the that's where you do it... so set the row id as one of the data fields so that is remains unique... – LeahPleurodon Dec 07 '16 at 03:43