Filtering Table to Only Show Current Week

Filtering Table to Only Show Current Week

zgoforthzgoforth Posts: 473Questions: 87Answers: 2

Hello,

So I am using a DataTable to create an attendance tracker based on employees status' during the week, there are two statuses that represent the class 'green' which means the employee is in office/working (P & TW), there are two statuses that represent the class 'yellow' which means still working but not in office or not accounted for (O & NR), and lastly there are two statuses that represent the class 'red' which means not working and out of office (H & PTO). This tracker is filled out every day of the week two mark the employees status for that day and it is then grouped as a child row underneath that employees department, see here a static example: https://jsfiddle.net/rnoLja1v/5/

Since I am dealing with dates, specifically Monday through Friday I want to filter the table to only show people in the current week, so I came up with this snippet to create some variables to get the current Monday and current Friday as well as format it how the table is formatting it with moment.

var now = moment();
var monday = now.clone().weekday(1);
var friday = now.clone().weekday(5);

let mondayF = monday.format('MM/DD/YYYY');
let fridayF = friday.format('MM/DD/YYYY');

console.log(mondayF); //output (as of today) "04/19/2021"
console.log(fridayF); //output (as of today) "04/23/2021"

I came across https://datatables.net/plug-ins/filtering/row-based/range_dates, but when I look at the example it doesn't make much since to me, although I do see that the plug in is accessible through a CDN which is nice :)

In my example I just updated it to include three dates that are within the current week range, and one that is two weeks away out of the range to make sure the example works.

From my understanding of the plugin, this is how it would work in my head (going off of my mondayF & fridayF values):
This is the initialization, then when it sets the declared variables to a substring, thats where I get lost, because there are completely different column values with no table to demonstrate.

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var iFini = document.getElementById('mondayF').value;
        var iFfin = document.getElementById('fridayF').value;
        var iStartDateCol = 4;
        var iEndDateCol = 12;

Here is where I get lost:

iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
        iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);
 
        var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
        var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
 
        if ( iFini === "" && iFfin === "" )
        {
            return true;
        }
        else if ( iFini <= datofini && iFfin === "")
        {
            return true;
        }
        else if ( iFfin >= datoffin && iFini === "")
        {
            return true;
        }
        else if (iFini <= datofini && iFfin >= datoffin)
        {
            return true;
        }
        return false;
    }
);

Sorry for the extremely long post, I just figure the best description and example(s) I provide, the easier I can help you help me :)

Answers

  • zgoforthzgoforth Posts: 473Questions: 87Answers: 2

    I have searched through just about everywhere on this site aswell as SO, and the only examples I can seem to find are where the table has either one or two search inputs to select a range only showing values between a beginning and a start date. Which is somewhat along the same lines of what I want to do, except I want it to filter itself instead of having the user enter the dates (which kind of defeats the purpose of what I am trying to achieve), I want only the week inbetween the monday (maybe even sunday), through Friday of the current week

Sign In or Register to comment.